1

我的以下代码在 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>

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

4

1 回答 1

1

来自MDN：

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

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

于 2013-12-23T12:12:13.267 回答