微信小程序使用canvas进行图片压缩
// 上传图片前的处理，获得图片的格式（base64）
function getBase64(callback) {
wx.chooseImage({
count: 1, //最多可以选择的图片总数
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (photo) {
console.log(photo)
var tempFilePaths = photo.tempFilePaths;
var fileInfo = tempFilePaths[0].split('/');
var fileName = fileInfo[fileInfo.length - 1];
if (photo.tempFiles.size < 102400) { // 这里是判断图片小于多少就不进行压缩，单位是Byte（字节）；1024Byte = 1KB; 1024KB = 1M; 1024M = 1GB
// 不压缩，直接返回64位
var base = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync(tempFilePaths[0], 'base64');
callback({
success: true,
data: base,
fileName: fileName
});
} else {
wx.getImageInfo({
src: photo.tempFilePaths[0],
success: function(res){
var ratio = 2;
var canvasWidth = res.width //图片原始长宽
var canvasHeight = res.height
// (canvasWidth);
while (canvasWidth > 1200 || canvasHeight > 1200){// 保证宽高在1200以内
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio++;
}
callback({
cWidth: canvasWidth,
cHeight: canvasHeight
})
// //cavas绘制
var ctx = wx.createCanvasContext('canvas')
ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
ctx.draw(false,setTimeout(function(){
// 将canvas画布上的内容保存为图片
wx.canvasToTempFilePath({
canvasId: 'canvas',
x: 0, // 指定的画布区域的左上角横坐标
y: 0, // 指定的画布区域的左上角纵坐标
width: canvasWidth, // 指定的画布区域的宽度
height: canvasHeight, // 指定的画布区域的高度
destWidth: canvasWidth, // 输出的图片的宽度
destHeight: canvasHeight, // 输出的图片的高度
fileType: 'jpg', // 图片输出格式
quality:0.8, // 图片的质量
success: function (res) {
// () // 画布输出为图片的路径
var data = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64');
// (data);
callback({
success: true,
data: data,
fileName: fileName
});
},
fail: function (res) {
console.log(res.errMsg)
}
})
},750))
}
})
}
},
fail: function() {
callback({
success: false
})
}
});
}
module.exports = {
getBase64
}