canvas图像无法在Chrome中呈现（适用于FF4和IE9）

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

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

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

任何帮助是极大的赞赏。 这是我第一次尝试使用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 } 

Answer 2

如果你有足够的img.onload，可能很难使用它。 chrome中等待图像加载的一种简单方法是使用：

 $(window).load(function () { 

代替

 $(document).ready(function () { 

as $（window）.load实际上正在等待加载所有图像。

在canvas中使用图像是完美的。 （也在firefow和IE工作）