等待添加到 CSS 的图像加载 - JQuery答案

【问题标题】：Wait for image added to CSS to load - JQuery等待添加到 CSS 的图像加载 - JQuery
【发布时间】：2014-10-31 07:06:22
【问题描述】：

我有一张图片，我想在上面画画。为此，我使用 jQuery 隐藏图像：

$("img").hide();

然后我创建一个画布并将其放在 html 中 ID 为 drawing 的同一 div 中。然后我将画布的背景设置为与我隐藏的图像的 img src 相同。这使它看起来像一个图像，但现在它实际上是一个以图像作为背景的画布。我这样做：

$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();

我遇到的问题是，有时图像未显示在画布中，并且画布不是图像的大小。我认为这可能是因为一些加载问题。我怎样才能等待画布确定在背景中显示图像？谢谢

编辑：请注意，在 DOM 中，画布始终具有正确的 src。它只是不显示它

编辑 2：这是 JSfiddle。在这里，一切似乎都很好，但我的代码中还有很多事情要做，包括从服务器获取内容，所以那里的速度较慢。希望这可以帮助你们理解问题：http://jsfiddle.net/wL3ezLke/2/ 再次感谢

【问题讨论】：

$(".image img") 和 $("img") 将类似于图像对象的数组。你必须得到一个src、width和height。使用$(selector).each() 方法，或者更具体地使用您的jQuery。
猜猜看，因为“图像没有显示在画布中，并且画布不是图像的大小”-> 代替 document.ready，使用 window.load 函数。 stackoverflow.com/questions/8396407/…
@PHPglue 我不同意，我们不能确定这里使用了多个.image css 类。不过我同意他确实应该使用更好的 jquery 选择器来确保在添加其他 .image 元素时不会破坏代码。
@nevermind 我试过了。但这会加载图像，而不是我的画布背景上的图像
@PHPglue 我一次只显示一个图像类和一个图像。我可以转到另一个图像，在这种情况下，服务器将获取它，页面将被刷新，脚本将被加载，然后我将调用函数将图像替换为画布。

标签： javascript jquery html css canvas

【解决方案1】：

你需要使用：

$(function(){
  // Code executed once the DOM is loaded.
});

官方文档： https://api.jquery.com/ready/

【讨论】：

整个代码在$(document).ready(function(){...中调用的函数中
我已经添加了。抱歉，拖了一段时间

【解决方案2】：

如果我理解正确，您的问题是知道图像何时加载（根据您的描述，可能还有很多其他问题）。

要测试图像是否已加载，这非常简单。

 var $img = $('#hiddenImg');
 if ($img[0].complete) doCanvasStuff();
 else {
      $img.on('load', function(e) {
         var $canvas = $('#drawCanvas');
          $canvas.css({width: $img.width(), height: $img.height()});
          //you can go ahead with the background image, but this is preferable
          var ctx = $canvas[0].getContext("2d");     
          ctx.drawImage(img,0,0);
      }
  }

这应该确保您仅在加载图像后才能在画布上加载图像，或者如果图像已加载，则立即执行画布操作，fiddle

【讨论】：

我不知道为什么，但这并没有为我添加任何东西到画布上。它只是将图像放在那里和一个空的画布。
确保在调用drawContext之前设置了尺寸：fiddle

【解决方案3】：

改变

$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();

到

 context.canvas.width = $("img").width();
 context.canvas.height = $("img").height();
 $('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');

所以height 和width 是在图像进入背景之前设置的。

【讨论】：