jQuery - 在继续之前等待图片加载完成

Question

在我目前正在开发的应用程序中，有2个HTML5画布。其中一个（TempCanvas）用于临时绘制图表，另一个（MainCanvas）用于将图表传输到其中以供展示。我有一张图片，我想将其绘制到TempCanvas上，然后在加载完成后，将TempCanvas绘制到MainCanvas上。

我遇到的问题是，在将图像绘制到TempCanvas之前，就已经将TempCanvas绘制到了MainCanvas上。是否有一种方法可以等待图像加载完成再继续执行代码呢？

我的主要功能：

1  // Draw the chart onto the TempCanvas
2  $(this).DrawChart(TempCanvas, OtherParams);
3  // Draw the TempCanvas onto the MainCanvas
4  MainCanvasContext.drawImage(TempCanvas.get(0), PositionX, PositionY);

DrawChart函数:

1  $.fn.DrawChart = function(TempCanvas, OtherParams)
2  {
3      var image = new Image();
4      image.onload = function()
5      {
6          TempCanvasContext.drawImage(image, PositionX, PositionY);
7          // Draw some other stuff on the TempCanvas.
8      }
9      image.src = FilePath;
10 }

基本上我正在寻找一种方法，在执行主线4之前等待DrawChart Line 6完成执行。任何指向正确方向的指针都将不胜感激。

- Braden G.

Answer 1

在您的otherParams对象中使用回调函数，如下所示：

  // Draw the chart onto the TempCanvas
  $(this).DrawChart(TempCanvas, { ...
      callback : function(){
          // THIS CODE WILL RUN ONLY AFTER IMAGE HAS LOADED
          // Draw the TempCanvas onto the MainCanvas
          MainCanvasContext.drawImage(TempCanvas.get(0), PositionX, PositionY);
      }
  });

DrawChart函数：

  $.fn.DrawChart = function(TempCanvas, OtherParams)
  {
      var image = new Image();
      image.onload = function()
      {
          TempCanvasContext.drawImage(image, PositionX, PositionY);
          // Draw some other stuff on the TempCanvas.
          otherParams.callback(); // NOW WE CAN CONTINUE RUNNING THE CODE
      }
      image.src = FilePath;
 }

通常情况下，在设计jQuery插件时创建回调函数和/或事件是一种好的实践方法。它们非常有用且整个库都是以这种方式构建的。

请注意，您可以做类似以下的事情：

image.onload = otherParams.callback;

将整个处理程序作为参数传递。这是您的决定，应该符合您的需求。在您的情况下，最好保持原样。

- Yotam Omer

Answer 2

由于图像加载是异步的，因此您必须以异步方式绘制MainCanvasContext。一种实现此目标的方法是使用jQuery.Deferred

  $.fn.DrawChart = function(TempCanvas, OtherParams)
  {
      var deferred = new $.Deferred();
      var image = new Image();
      image.onload = function()
      {
          TempCanvasContext.drawImage(image, PositionX, PositionY);
          // Draw some other stuff on the TempCanvas.

           deferred.resolve("I'm done");
      }
      image.src = FilePath;
      return deferred.promise();
}

$(this).DrawChart(TempCanvas, OtherParams).done(function(){
    MainCanvasContext.drawImage(TempCanvas.get(0), PositionX, PositionY);
});

- user2033671