使用 Promise() 在 Web 浏览器上加载图像 [英] loading an image on web browser using Promise()

问题描述

我正在尝试从 这里学习如何用 JavaScript 制作 SuperMario有人可以解释以下函数 LoadImage 的流程吗?

I'am trying to learn how to make SuperMario in JavaScript from here Can someone explain flow of the below function LoadImage ?

function loadImage(url) {
        return new  Promise(resolve => {
            const image = new Image();
            image.addEventListener('load', () => {
                resolve(image);
            });
            image.src = url; 
        });
}

const canvas = document.getElementById('screen');
const context = canvas.getContext('2d');

context.fillRect(0,0,50,50);

loadImage('/img/tiles.png')
.then(image=>{
    context.drawImage(image,0,0);  // the function LoadImage returns a Promise with image object(which is  a constant)
// as parameter and if the promise is fulfilled then the image is drawn. 
/
});

编辑

我确实了解如何使用 => 运算符.用于缩短函数长度.

I do understand how to use => operator. Which is used to make length of functions smaller.

image.addEventListener('load', () => {
                resolve(image);

上面这行表示在加载图像时承诺已履行.那么这是否意味着执行了以下行，然后事件侦听器正在等待将图像下载到客户端浏览器中?

the above line means that the promise is fulfilled when image is loaded. So does this mean that the following line is executed and then the event listener is waiting for the image to be downloaded in client browser ?

image.scr = url;

下面函数的流程对我来说有点模糊

The flow of the below function is a little fuzzy to me

function loadImage(url) {
        return new  Promise(resolve => {
            const image = new Image();
            image.addEventListener('load', () => {
                resolve(image);
            });
            image.src = url; 
        });

编辑 2:

好吧，这是一个愚蠢的帖子.是的，因为来自 url 的 IMAGE 被加载到图像对象中，然后事件侦听器启动了 resolve().

Okay, this was a stupid post. And yup as the IMAGE from url is loaded in the image object then Event listener fires up the resolve().

推荐答案

您展示的代码引入了一个异步原语 Promise，它可以被传递并用于访问尚未填充的资源.

The code you are showing introduces an asynchronous primitive, Promise, which can be passed around and used to access a resource that hasn't been populated yet.

p>

在这种情况下，您需要一个完全加载并具有您可以使用的图像数据的 Image.但是，在获取图像数据的网络请求完成之前，您无法访问图像数据.

In this case, you want an Image that is fully loaded and has image data that you can use. However, you can't access the image data until a network request finishes that would fetch the image data.

例如，这是行不通的:

const img = new Image();
img.src = "example.com/house.jpg";
ctx.drawImage(img, 0, 0); // img isn't done loading yet

相反，我们必须等待直到加载完成.有很多方法可以做到这一点，但最常见的约定是使用、回调、Promises 或 async/await.

Instead, we have to wait until the loading is done. There are a lot of ways to do that but the most common conventions are to use, callbacks, Promises, or async/await.

您展示的方法结合了回调和承诺(非必要).

The method that you have shown combines callbacks and Promises (out of necessity).

让我们分解代码:

/**
 * Load an image from a given URL
 * @param {String} url The URL of the image resource
 * @returns {Promise<Image>} The loaded image
 */
function loadImage(url) {
  /*
   * We are going to return a Promise which, when we .then
   * will give us an Image that should be fully loaded
   */
  return new Promise(resolve => {
    /*
     * Create the image that we are going to use to
     * to hold the resource
     */
    const image = new Image();
    /*
     * The Image API deals in even listeners and callbacks
     * we attach a listener for the "load" event which fires
     * when the Image has finished the network request and
     * populated the Image with data
     */
    image.addEventListener('load', () => {
      /*
       * You have to manually tell the Promise that you are
       * done dealing with asynchronous stuff and you are ready
       * for it to give anything that attached a callback
       * through .then a realized value.  We do that by calling
       * resolve and passing it the realized value
       */
      resolve(image);
    });
    /*
     * Setting the Image.src is what starts the networking process
     * to populate an image.  After you set it, the browser fires
     * a request to get the resource.  We attached a load listener
     * which will be called once the request finishes and we have
     * image data
     */
    image.src = url;
  });
}

/*
 * To use this we call the loadImage function and call .then
 * on the Promise that it returns, passing a function that we
 * want to receive the realized Image
 */
loadImage("example.com/house.jpg").then(houseImage => {
  ctx.drawImage(houseImage, 0, 0);
});

老实说，loadImage 函数可能更健壮一些，因为它现在不处理错误.考虑以下增强:

In all honesty though, the loadImage function could be a little bit more robust since it doesn't handle errors right now. Consider the following enhancement:

const loadImage = (url) => new Promise((resolve, reject) => {
  const img = new Image();
  img.addEventListener('load', () => resolve(img));
  img.addEventListener('error', (err) => reject(err));
  img.src = url;
});

loadImage("example.com/house.jpg")
  .then(img => console.log(`w: ${img.width} | h: ${img.height}`))
  .catch(err => console.error(err));

这篇关于使用 Promise() 在 Web 浏览器上加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！