drawImage() 不工作 - Firebug 显示：NS_ERROR_XPC_BAD_CONVERT_JS答案

【问题标题】：drawImage() not working - Firebug shows: NS_ERROR_XPC_BAD_CONVERT_JSdrawImage() 不工作 - Firebug 显示：NS_ERROR_XPC_BAD_CONVERT_JS
【发布时间】：2012-09-07 19:19:16
【问题描述】：

为什么这个小脚本不起作用？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<canvas id="can" height="500" width="500"></canvas>

<script type="text/javascript">

    var image = new Image().src="1.jpg";

    context = document.getElementById("can").getContext("2d");

    context.drawImage(image,10,10,480,480);

</script>

</body>
</html>

Firefox 中的 Firebug（最新版本）显示：

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]
[Bei diesem Fehler anhalten]    

context.drawImage(image,10,10,480,480);

Chrome 也无法显示图片，他们只会说ERROR。

【问题讨论】：

标签： javascript canvas drawimage

【解决方案1】：

image.src 是异步的，你需要通过回调来绘制它。

var image = new Image;
image.onload = function() { context.drawImage(image, 10, 10, 400, 400); }
image.src = .....

【讨论】：

感谢它现在工作，但你能解释一下发生了什么吗？
调用image.src = ...时没有加载图像数据，您知道它已加载并可用于绘图的唯一方法是使用onload回调函数。您所做的是在图像加载之前绘制，因此出现错误

【解决方案2】：

你需要做的就是改变：

   ctx.drawImage(i, 0, 0, arg.width, arg.height);

到：

   ctx.drawImage(arg.img, 0, 0, arg.width, arg.height);

【讨论】：