故事背景
卤煮项目中有OCR证件识别的需求,像这种前端向后台发送图片的操作,我们这边肯定是要把图片压缩一下再传给后台的,比如卤煮MI 10 pro拍一张要10兆起步,这上传起来还不要了老命啦~~看网上大佬都说微信自带的wx.compressImage不是很好用,所以咱就直接用canvas进行压缩吧!!!!!!
强烈建议:主要跳转画布大小和压缩质量,不然给你压个20KB???
需求实现
1.首先我们需要一个canvas画布,记得把它设置在某个隐秘的角落~~
<canvas canvas-id='photo_canvas' style='position:fixed;left: 9999px;width:500px;height:{{ canvasHeight }}px' class='myCanvas'></canvas>
2.卤煮的图片,支持拍照和相册读取图片,直接上代码
拍照:
takePhoto() {
var that = this;
const ctx = wx.createCameraContext();
ctx.takePhoto({
success: (res) => {
console.log(res);
that.setData({ temporaryImg: res.tempImagePath });
that.compressImage(res.tempImagePath, (res1) => { // 压缩方法
that.setData({ temporaryImg: res1 });
});
}
})
},
相册选取:
// 选择照片
chooseimg(){
var that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original'], // 因为下面走压缩了,这里就原图上传
sourceType:['album'], // 可以指定来源是相册还是相机,默认二者都有
success:(res)=> {
that.compressImage(res.tempFilePaths[0], (res1) => { // 压缩方法
that.setData({ temporaryImg: res1 });
that.uploadImg(); // 上传后台的方法
});
},
})
},
canvas压缩:
// 压缩图片
compressImage(path, callback) {
var that = this;
//获取图片信息
wx.getImageInfo({
src: path,
success: function (res) {
var ctx = wx.createCanvasContext('photo_canvas'); // 创建画布
var towidth = 500; //设置canvas尺寸,按宽度500px的比例压缩
var toheight = Math.trunc(500*res.height/res.width); //根据图片比例换算出图片高度
that.setData({ canvasHeight: toheight });
ctx.drawImage(path, 0, 0, res.width, res.height, 0, 0, towidth, toheight);
ctx.draw(false, function () {
wx.canvasToTempFilePath({
canvasId: 'photo_canvas',
fileType:"jpg",
quality: 0.8, // 注意你的压缩质量,卤煮真的压缩出20KB的,图片整个都是糊的
success: function (res) {
console.log(res.tempFilePath);
callback(res.tempFilePath);
}
}, this)
})
}
});
},
是的,canvas压缩就是如此简单!!!!!!
canvas能做的还很多,可惜卤煮没咋接触过,去学习啦!!!!!!
欢迎大佬踢馆,共同进步~