Question

我正在使用此lib在上传之前调整图片大小和压缩

我像这样调整图片大小：

var imgOne = $('#u-fileUpload-1')[0].files[0];
var imgTwo = $('#u-fileUpload-2')[0].files[0];

      if (imgOne !== undefined) {
        ImageResizer.resizeImage(imgOne, resizeOptions, function(result) {
          _this.imgArray.push(result);
        });
      }

      if (imgTwo !== undefined) {
        ImageResizer.resizeImage(imgTwo, resizeOptions, function(result) {
          _this.imgArray.push(result);
        });
      }

我调整图片大小并将其存储在名为imgArray的数组中唯一的问题是这些函数是异步的。因此，我的代码最终发布/上传表单，imgArray为空，因为调整大小功能尚未完成。

那么有没有办法将这些函数链接起来或检查它们何时完成？

由于

Answer 1

你可以创建一个只需要调整图像数组和回调的函数：

function resizeImages(imgs, callback) {
    var resizedImages = [];
    for (var i = 0; i < imgs.length; i++) {
        ImageResizer.resizeImage(imgs[i], resizeOptions, function(result) {
            resizedImages.push(result);
            if (resizedImages.length === imgs.length) {
                callback(resizedImages);
            }
        });
    }
}

并使用它：

var imgOne = $('#u-fileUpload-1')[0].files[0];
var imgTwo = $('#u-fileUpload-2')[0].files[0];

resizeImages([imgOne, imgTwo], function(resizedImages) {
    //do work with resizedImages
});

Answer 2

将其作为异步函数（promises）DOC

的数组处理

let imgArr = [img1,img2, ..... ];

var resizeArr = [];
imgArr.forEach(img => {
    let p = new Promise((resolve, reject) => {
      (function(cImg){
         ImageResizer.resizeImage(cImg, resizeOptions, function(result) {
            resolve(result);
         });
      })(img);
    });
    resizeArr.push(p);
})

Promise.all(resizeArr).then(resizedImgs => {
   //process new images
})

FIDDLE

Javascript链一个异步图像大小调整功能

2 个答案: