загрузка изображения не запускается внутри обещания - PullRequest
Новая
       9

загрузка изображения не запускается внутри обещания

1 голос
/ 12 января 2020

Здравствуйте, я создал обещание и рекурсивно вызываю его из al oop для заполнения массива, но загрузка никогда не срабатывает, поэтому никогда не разрешает обещание.

Кто-нибудь может увидеть, что я что-то не так делаю? 

function imageResizeToDataUriPromise(url, width, height) {

    return new Promise(function (resolve, reject) {


        var img = new Image();
        img.setAttribute('crossOrigin', 'anonymous');

        img.onload = function () {

             var imgWidth = img.naturalWidth;
             var imgHeight = img.naturalHeight;

             var result = _scaleImage(imgWidth, imgHeight, width, height, true);
             //create an off-screen canvas
             var canvas = document.createElement('canvas');
             var ctx = canvas.getContext('2d');

             canvas.width = result.width;
             canvas.height = result.height;

             //draw source image into the off-screen canvas:
             ctx.drawImage(img, 0, 0, result.width, result.height);

            resolve(canvas.toDataURL());

         };

        img.src = url;

    });
}

Ответы [ 2 ]

0 голосов
/ 12 января 2020

это мой базовый c вызывающий блок, но он в oop

caller(logo, 150, 150).then
(function (response) {
  console.log("Success!", response);
  base64Urls.push(response);

});

0 голосов
/ 12 января 2020

Это работает после того, как я использую это обещание, чтобы получить URL и установить его для элемента изображения ... не знаю, как вы будете использовать возвращаемый URL данных. Одна из возможных проблем: можете ли вы проверить, обслуживает ли ваш источник изображения изображение. (дважды проверьте вкладку сети в инструменте разработчика). 

function imageResizeToDataUriPromise(url, width, height) {

  return new Promise(function(resolve, reject) {
    var img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function() {
      console.log("IMG ONLOAD handler invoked");
      var imgWidth = img.naturalWidth;
      var imgHeight = img.naturalHeight;

      var result = img;

      //create an off-screen canvas
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = result.width;
      canvas.height = result.height;

      //draw source image into the off-screen canvas:
      ctx.drawImage(img, 0, 0, result.width, result.height);

      ctx.fillStyle = "white";
      ctx.font = '21px sans-serif';
      ctx.fillText('Hello world', 21, 51);

      resolve(canvas.toDataURL());
    };

    img.src = url;

  });
}

imageResizeToDataUriPromise("https://i.imgur.com/j7Ie7pg.jpg", 100, 100)
  .then(url => document.querySelector("#an-image").src = url);

console.log("Promise obtained");
<img id="an-image">
...