Слушатель события загрузки не запускается после назначения URL-адреса источника img в Promise - PullRequest
0 голосов
/ 19 октября 2018

Я пишу обещание, которое принимает URL изображения в качестве дополнения.Затем я хочу сделать что-то после того, как ресурс изображения будет полностью загружен.

function retrieveImage(imageUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.addEventListener('load', function (e) {
      // bunch of execution
      console.log('I am loaded.');
      resolve('something');
    });
    img.src = imageUrl;
  });
}

Я ожидал, что после того, как я сделаю что-то вроде:

// Load google's logo.
const loadSomeImage = retrieveImage('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');

Консоль выдаст сообщение «Я загружен».сообщение.Вместо этого на консоли ничего не показывалось.Более того, обещание продолжало отображаться в ожидании даже после того, как я проверил панель сетевой активности на Firefox, в которой говорилось, что http GET имеет статус 200.

Это оригинальная функция.

function retrieveImage(imageUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.addEventListener('load', function (e) {
      // I want to draw the image into a canvas
      // and convert it into base64url.
      const canv = document.createElement('canvas');
      canv.width = this.width;
      canv.height = this.height;
      const ctx = canv.getContext('2d');
      ctx.drawImage(this, 0, 0);
      // The reason why I need set crossOrigin attr to anonymous is
      // because the following code. If I don't set that, I will get a
      // security warning and the code just doesn't proceed any further.
      resolve(canv.toDataURL());
    });
    img.src = imageUrl;
  });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...