画布图像无法在 Chrome 中渲染（适用于 FF4 和 IE9）

Question

我很困惑。对于我的一生，我不知道为什么这在 Chrome 中不起作用。您可以在此处查看代码：

http://jsfiddle.net/corydorning/NgXSH/

当我拉动时这段代码在 FF 或 IE9 中运行得很好。您会注意到，fiddle 可以在 Chrome 中与渲染的元素一起工作，但它不能在 fiddle 之外工作。

非常感谢任何帮助。这是我第一次尝试画布。

Answer 1

问题似乎是您没有等待原始图像元素加载。如果你稍微改变一下，它就可以正常工作：

  $(function() {
    var canvas = document.createElement('canvas'),
    canvasExists = !!(canvas.getContext && canvas.getContext('2d')),
    oImage = $('img')[0];

    if (canvasExists) {
      var context = canvas.getContext('2d'), img = new Image();

      img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;

        $(oImage).replaceWith(canvas);

        context.drawImage(oImage, 0, 0);
      }

      img.src = oImage.src; 
    } else {
      // apply MS filters
    }

Answer 2

如果你有很多 img.onload ，那么使用 img.onload 可能会很困难。在 chrome 中等待图像加载的一个简单方法是使用 :

$(window).load(function () {

而不是

$(document).ready(function () { 

$(window).load 实际上是在等待所有图像加载。

它非常适合在画布中使用图像。
（也可在 firefow 和 IE 中工作）