Я пишу обещание, которое принимает 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;
});
}