各位大佬请教一个问题。就是小程序上传图片时将图片进行压缩，当在相册中选择多张图片时，遍历图片路径来压缩图片，但是生成压缩图片路径时，ctx.draw()中的回调函数，始终只生成最后一张图片，我使用闭包的方式将i传进去也不行。如何解决？
js部分代码：
openCamera: function () { if (this.data.userPublic.tempFilePaths.length >= 9) { wx.showToast({ title: '最多上传9张', icon: 'success', }); return; } var that = this; var photoCount = 9 - parseInt(this.data.userPublic.tempFilePaths.length); if (photoCount > 0) { wx.chooseImage({ count: photoCount, // 默认9 sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (msg) { // 上传图片 //判断机型 // console.log(msg); var model = ""; wx.getSystemInfo({ success: function (res) { model = res.model; } }) if (model.indexOf("iPhone")>0) { saveImage(msg.tempFilePaths); } else { drawCanvas(that); } // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 function saveImage(uu) { var cc = that.data.userPublic.tempFilePaths || []; if (uu instanceof Array){ for (var i = 0; i < uu.length; i++) { cc.push(uu[i]); }; }else{ cc.push(uu); } var tempFilePaths = "userPublic.tempFilePaths"; that.setData({ [tempFilePaths]: cc }) } function prodImageOpt(){ wx.canvasToTempFilePath({ canvasId: 'attendCanvasId', success: function success(res) { //console.log(res); wx.getImageInfo({ src: res.tempFilePath, success: function (res) { // console.log(res.width); // console.log(res.height); } }) saveImage(res.tempFilePath); } }) } function drawCanvas(that) { var that = that; var ratio = 1; var viewWidth = 500; //console.log(that); const ctx = wx.createCanvasContext('attendCanvasId'); //console.log(ctx); //console.log(msg.tempFilePaths); for (var i = 0; i < msg.tempFilePaths.length; i++) { wx.getImageInfo({ src: msg.tempFilePaths[i], success: function (res) { // console.log(res.width); // console.log(res.height); ratio = res.width/res.height; // console.log(ratio); ctx.drawImage(msg.tempFilePaths[i], 0, 0, viewWidth, viewWidth / ratio); (function(e){ return ctx.draw(false,function(){ console.log(e) //打印出来都是0,1,2,3...但是打印出处理后的照片却一直是最后一张选取的照片 prodImageOpt(); }); })(i); } }) } // console.log(that.data); } } }) } }, |
html部分：
<!--pages/public/piblic.wxml--><view class="page-wrap"> <form catchsubmit="formSubmit" catchreset="formReset"> <view class="page-section"> <view class="textarea-wrp"> <textarea placeholder="说些什么" placeholder-style="color:#999" auto-focus="true" style="height:5em" name="content" /> </view> </view> <view wx:if="{{!postId}}" class="page-section flex post-images" > <block wx:for="{{userPublic.tempFilePaths}}" > <view> <image class="post-image" src="{{item}}" /> </view> </block> <view class="add-image" bindtap="openCamera">+</view> </view> <view wx:if="{{!postId}}" class="page-section flex flex-row flex-vcenter"> <view class="page-section-title flex-auto">仅自己可见</view> <switch name="is_anonymous" class="flex-auto" /> </view> <view class="btn-area"> <button type="primary" formType="submit">发布</button> </view> </form></view><view> <canvas style="width:500px;height:700px;" canvas-id="attendCanvasId" hidden='true'></canvas></view> |
但是选取4张不同的照片，却一直是显示最后一张。
遇到同样的问题，请问你解决了吗？如何解决的？
用递归，不要用闭包
我是用在data里面加一个currentIndex，表示当前处理到第几张。处理完一张就+1