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

我正在尝试使用canvas裁剪多个图像，我想在裁剪完所有图像后运行其他一些功能

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

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;
  });
}

现在我有两张图片需要调用，所以我用每张图片调用promise

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');
      }
    });
  });
};

我正在检查所有承诺是否得到解决，然后调用其他函数

如果我向promises函数发送多个图像，第一个图像是透明的，如果我只发送一个图像，那么一切正常

如果我对任何一张图片进行评论，那么裁剪就可以了

我在这里创建了代码笔

尝试注释

needCropImgs

的一个数组值，然后图像将显示良好。

Typo，
您在

img

声明之前忘记了

const

或

let

或

var

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

这意味着所有异步回调中的

img

变量将引用最新声明的Image（）。如果最后一张图像没有在其他图像加载之前加载，这确实会导致一些透明的结果

---

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

您的主要问题似乎是使用隐式全局变量，但您的代码笔似乎无法工作，因为由于CORS错误，图像无法加载。