Javascript：在 Chrome 中将画布转换为图像答案

【问题标题】：Javascript: Convert Canvas to Image in ChromeJavascript：在 Chrome 中将画布转换为图像
【发布时间】：2014-01-11 15:03:52
【问题描述】：

我的以下代码在 IE 中运行良好，但在 Chrome（版本 31.0.1650.63 m）中运行良好。
错误消息：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

<html>
<body>
<img id="source" src="C:\test.jpg" /></br>
<input type="button" value="convert" onclick="onClick()" /></br>
<img id="output" />

<script>
    onClick = function () {
        var source = document.getElementById("source");
        var canvas = document.createElement("canvas");
        canvas.width = source.width;
        canvas.height = source.width;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(source, 0, 0);
        var output = document.getElementById("output");
        output.src = canvas.toDataURL("image/png");
    };
</script>

</body>
</html>

我在这里看到了很多类似的问题，但没有找到答案。任何帮助将不胜感激。

【问题讨论】：

标签： javascript image canvas cross-browser todataurl

【解决方案1】：

来自MDN：

尽管您可以在画布中使用未经 CORS 批准的图像，这样做会污染画布。一旦画布被污染，你就不能更长的时间将数据拉出画布。

所以您在画布上绘制的图像来自另一个域，因此您不能使用画布导出数据。有关详细信息，请参阅 MDN 文章。

【讨论】：