这篇文章主要为大家详细介绍了微信小程序实现图片压缩功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下，下面直接上代码
先是wxml:
view bindtap='takePictures'选择图片/viewcanvas canvas-id="attendCanvasId" style="width:300px;height:300px;position: absolute;left:-300px;top:-300px"/canvasimage src="{{attendSuccessImg}}"/image下面是js
Page({ /** * 页面的初始数据 */ data: { attendSuccessImg: "", canvasImgUrl:'', src:"" }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, // 点击照相 takePictures: function () { var that = this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; that.setData({ attendSuccessImg: tempFilePaths[0] }); // 上传图片 //判断机型 var model = ""; wx.getSystemInfo({ success: function (res) { var that = this; model = res.model; } }) if (model.indexOf("iPhone") = 0) { // that.uploadFileOpt(that.data.attendSuccessImg); console.log(111111) } else { drawCanvas(); } // 缩放图片 function drawCanvas() { const ctx = wx.createCanvasContext('attendCanvasId'); ctx.drawImage(tempFilePaths[0], 0, 0, 94, 96); ctx.draw(); that.prodImageOpt(); } } }); }, // 生成图片 prodImageOpt: function () { var that = this; wx.canvasToTempFilePath({ canvasId: 'attendCanvasId', success: function success(res) { that.setData({ canvasImgUrl: res.tempFilePath }); // 上传图片 that.uploadFileOpt(that.data.canvasImgUrl); }, complete: function complete(e) { } }); },})
