收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug ctx.draw() 客户端 iOS 6.7.0 2.1.1

各位大佬请教一个问题。就是小程序上传图片时将图片进行压缩,当在相册中选择多张图片时,遍历图片路径来压缩图片,但是生成压缩图片路径时,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-06-27  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • Galina
    Galina
    2018-06-28

    我是用在data里面加一个currentIndex,表示当前处理到第几张。处理完一张就+1

    2018-06-28
    赞同
    回复
  • luffy
    luffy
    2018-10-10

    用递归,不要用闭包

    2018-10-10
    赞同
    回复
  • 路灯下的老男孩
    路灯下的老男孩
    2018-10-10

    遇到同样的问题,请问你解决了吗?如何解决的?

    2018-10-10
    赞同
    回复