微信小程序压缩图片及上传至云存储
目的：
将选择的任意图片压缩，给定压缩后的图片高度宽度最大值并保证同比例压缩，最后上传至微信云存储。
思路：
1 使用函数
此函数只对jpg图片有效，其他图片格式不行；
2 使用canvas组件，先将图片绘制到canvas中:调用和函数，然后利用将canvas的内容输出。
注意点：canvas是设备相关的，需要获取设备的像素比来最终确定图片的大小。
具体步骤：
1 在wxml中添加canvas元素
<canvas style=”width:{{canvasWidth}}px;height:{{canvasHeight}}px” canvas-id=”canvas-id”></canvas>
canvasWidth,canvasHeight分别是canvas的宽度和高度，这两个变量放在页面的data中，因为需要根据所选的图片大小来改变，也方便压缩后隐藏（设置为0），canvas的ID是必须的，后面要用到。
2 在wxss文件中设置样式
.canvas-id{position:absolute;left:-99999px}
3 js中实现具体的实现
//压缩时高度和宽度的最大值
var _maxWidth = 280;
var _maxHeight = 180;
//图片压缩后的大小
var _targetWidth = 0,_targetHeight = 0;
//获取设备像素比:一个设备像素对应多少个图片像素
var _pixelRatio = ().pixelRatio;
// 选择图片
({
count: 1, //只选择一个图片文件
success:(res)=>{
var _imageFile = [0];//获取文件路径
//获取文件信息：主要是高度和宽度，然后计算压缩后的图片高度和宽度
//这里设置最大高度和宽度，并且同比例压缩
({
src: [0],
success:(imageInfoRes)=>{
//计算压缩后的图片大小
if ( / > _maxHeight / _maxWidth){
_targetWidth = _maxHeight * / /_pixelRatio;
_targetHeight = _maxHeight/_pixelRatio;
}
else{
_targetWidth = _maxWidth/_pixelRatio;
_targetHeight = _maxWidth * / /_pixelRatio;
}
//更新画布大小（这个肯定是需要的）
({
canvasWidth:_targetWidth,
canvasHeight:_targetHeight
});
//就是WXML里面canvas的ID
var _canvasID = 'canvas-id';
let ctx = (_canvasID);
(0, 0, _targetWidth, _targetHeight);
(_imageFile, 0, 0, _targetWidth, _targetHeight);
//为了保证存储成功，需要将存储图片的代码放到draw的回调函数中
(false,()=>{
({
fileType:'png', //图片格式，可以用其他格式
canvasId: _canvasID,
success:(saveRes)=>{
//将压缩后的图片上传到云存储,云存储中已经有一个images的文件夹，至于如何开通云存储可以自己查下，很简单
({
cloudPath:”images/" + (new Date()).valueOf() + ".png",
filePath:,
success:(uploadFileRes)=>{
}
});
//更新画布大小,设置为0，免得显示出来
({
canvasWidth:0,
canvasHeight:0
});
}
})
});
}
})
},
fail:console.error
})