Question

我正在尝试使用画布来裁剪多个图像，并且我想在裁剪完所有图像后再运行其他功能。

这是我的裁剪图像的诺言功能

const checkImage = url => {
  return new Promise(resolve => {
    const workingURL = url;
    const canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 200;
    const ctx = canvas.getContext('2d');  
    img = new Image();
    img.setAttribute('crossOrigin', '');
    img.onload = function(){
      var w = img.width;
      var h = img.height;

      var rw = 200;
      var rh = 200;

      if (w > h) {
        var ar = (w / h).toFixed(2);
        var dar = (200/h);
        rw = Math.floor(w * dar);
      } else if (h > w) {
        var ar = (h / w).toFixed(2);
        var dar = (200/w);
        rh = Math.floor(h * dar);
      }

      var sx = 200 / 2 - rw / 2;
      var sy = 200 / 2 - rh / 2;
      console.log(sx, sy, rw, rh);
      console.log(img);
      ctx.drawImage(img,sx,sy, rw , rh);
      var s = canvas.toDataURL();
      console.log('done cropping ', url, s);
      resolve({url: workingURL, res: s});
    }
    img.onerror = (err) => {
      console.log('onload error ',err);
      resolve({url: workingURL, res: false});
    };
    img.src = url;
  });
}

现在我需要调用几张图片，所以我在每张图片上都叫诺言

cropImageForGIFFn = () => {
  const needCropImgs = [
    {
      "src": "https://s3.amazonaws.com/tech-turing/event-images/ydgPwb28ThtgeATC8/img-Hrc7otKvJZTg6D5Rp.png",
    },
    {
      "src": "https://s3.amazonaws.com/tech-turing/event-images/ydgPwb28ThtgeATC8/img-ZAnRMDHfAGz2Xe9oX.png",
    },
  ];
  const needCropImgsLen = needCropImgs.length;
  let resolvedPromises = 0;

  needCropImgs.forEach(function (imgInfo) {      
    checkImage(imgInfo.src).then((info) => {
      console.log('promise resolved');
      console.log(info);

      resolvedPromises += 1;
      if (resolvedPromises === 1) {
        document.getElementById('img1').src = info.res;
      }

       if (resolvedPromises === 2) {
        document.getElementById('img2').src = info.res;
      }
      console.log({resolvedPromises});
      if (resolvedPromises >= needCropImgsLen) {
        console.log('all are resolved');
      }
    });
  });
};

我正在检查所有的诺言是否已解决，然后再调用其他函数。

如果我将多个图像发送到我的Promise函数，则如果仅发送一个图像，则第一个图像将变为透明，然后一切正常。

如果我评论任何图像，则裁剪效果很好。

我在https://codepen.io/sasikanth1/pen/rQjxXL此处创建了Codepen

尝试注释needCropImgs的数组值之一，然后图像将正常显示。

Answer 1

错字，
您在const声明之前忘记了let或var或img。

   img = new Image();
 // ^- scope leak

这意味着您在所有异步回调中的img变量将引用最新声明的Image（）。如果最后一个图像没有在其他图像之前加载，则确实可能导致透明的结果。

因此只需添加此关键字，您就可以了。

使用画布在Promise中裁剪图像不起作用

1 个答案: