javascript - Canvas 图像无法在 Chrome 中呈现(适用于 FF4 和 IE9)

Question

我被难住了。对于我的生活，我不知道为什么这在 Chrome 中不起作用。你可以在这里看到代码:

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

当我在 FF 或 IE9 中提取这段代码时，它运行良好。您会注意到 fiddle 将在 Chrome 中与呈现的元素一起工作，但它在 fiddle 之外不起作用。

非常感谢任何帮助。这是我第一次尝试使用 Canvas 。

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
    }