用递归,不要用闭包
回调函数执行顺序的问题,使用闭包也无法解决各位大佬请教一个问题。就是小程序上传图片时将图片进行压缩,当在相册中选择多张图片时,遍历图片路径来压缩图片,但是生成压缩图片路径时,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张不同的照片,却一直是显示最后一张。 [图片]
2018-10-10