大佬教程收集整理的这篇文章主要介绍了记录以下uniapp写小程序然后进行图片上传压缩,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
今天记录一下uniapp写小程序上传图片压缩的功能
首先定义上传图片的方法
@H_772_11@
然后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里面了
今天的记录就到此了
以上是大佬教程为你收集整理的记录以下uniapp写小程序然后进行图片上传压缩全部内容,希望文章能够帮你解决记录以下uniapp写小程序然后进行图片上传压缩所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。