小程序开发
developers

小程序开发解答

搜索热词： 　微信支付 　审核不过

回调函数执行顺序的问题，使用闭包也无法解决

时间：2019-05-07 来源：小程序工厂

    各位大佬请教一个问题。wx.showToast在安卓系统下无效-微信小程序教程。就是微信小程序上传图片时将图片进行压缩，当在相册中选择多张图片时，遍历图片路径来压缩图片，但是生成压缩图片路径时，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部分：