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

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

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

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

任何帮助是极大的赞赏。这是我第一次尝试画布。

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

  $(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
    }