今天记录一下uniapp写小程序上传图片压缩的功能
首先定义上传图片的方法
然后res.tempFilePath[0]就是图片的临时路径
其次定义压缩图片然后获取压缩后图片大小的方法,方法使用canvas
首先咱们写一个canvas的标签
在data里定义宽和高首先先为0
最后定义压缩图片的方法,这个我直接放代码,方便各位小伙伴复制
// 图片压缩 compressImage(src) { let that = this uni.getImageInfo({ src, success(res) { var ratio = 2; var canvasWidth = res.width //图片原始长宽 var canvasHeight = res.height while (canvasWidth > 400 || canvasHeight > 400) { // 保证宽高在400以内 canvasWidth = Math.trunc(res.width / ratio) canvasHeight = Math.trunc(res.height / ratio) ratio++; } that.cWidth = canvasWidth that.cHeight = canvasHeight var ctx = uni.createCanvasContext('canvas') ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight) ctx.draw(false, setTimeout(() => { uni.canvasToTempFilePath({ canvasId: 'canvas', destWidth: canvasWidth, destHeight: canvasHeight, fileType: 'jpg', quality: 0.4, success: function(res1) { uni.getFileInfo({ filePath: res1.tempFilePath, success(ress) { console.log(ress) } }) }, fail: function(res) { console.log(res.errMsg) } }) }, 100)) //留一定的时间绘制canvas }, fail(err) { console.log(err.errMsg) } }) },
最后压缩后的图片大小就在ress里面了,图片临时路径是在res1中
今天的记录就到此了
请发表评论