画布图像无法在Chrome中渲染（适用于FF4和IE9） [英] Canvas Image not rendering in Chrome (works in FF4 & IE9)

问题描述

我很难过。对于我的生活，我不知道为什么这不适用于Chrome。你可以在这里看到代码：

I'm stumped. For the life of me, i have no idea why this is not working in Chrome. You can see the code here:

http：// jsfiddle.net/corydorning/NgXSH/

当我在FF或IE9中提取此代码时效果很好。您会注意到小提琴将在Chrome中与渲染元素一起使用，但它不能在小提琴之外工作。

When i pull this code up in FF or IE9 it works great. You'll notice that the fiddle WILL work in Chrome with the rendered element, but it DOES NOT work outside of fiddle.

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

Any help is greatly appreciated. This is my first attempt with canvas.

推荐答案

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

The problem appears to be that you're not waiting for the original image element to get loaded. If you change it around a little, it works fine:

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

这篇关于画布图像无法在Chrome中渲染（适用于FF4和IE9）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！