Обрезка изображения внутри обещаний с использованием холста не работает - PullRequest
Новая
       5

Обрезка изображения внутри обещаний с использованием холста не работает

0 голосов
/ 13 ноября 2018

Я пытаюсь обрезать несколько изображений с помощью 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;
  });
}

теперь мне нужно вызвать пару изображений, поэтому я звоню обещание с каждым изображением 

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

Я проверяю, все обещания разрешены или нет, и затем вызываю какую-то другую функцию.

Если я отправляю несколько изображений в функцию обещаний, первое изображение получается прозрачным, если я отправляю только одно изображение, то все работает нормально.

Если я прокомментирую какое-либо из изображений, обрезка работает нормально.

Я создал Codepen здесь https://codepen.io/sasikanth1/pen/rQjxXL

попробуйте комментировать одно из значений массива needCropImgs, тогда изображение будет отображаться нормально.

1 Ответ

0 голосов
/ 13 ноября 2018

Опечатка ,
Вы забыли const или let или var до объявления img.

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

Это означает, что ваша переменная img во всех асинхронных обратных вызовах будет ссылаться на последний объявленный Image ().Это действительно может привести к некоторому прозрачному результату, если последнее изображение не загружалось раньше других.

Так что просто добавьте это ключевое слово, и все будет в порядке.

...