3

我这样做：

$('#displayBtn').click(function(){
    var canvas = document.getElementById("myCanvas");
    var dataUrl = canvas.toDataURL();
    document.getElementById("textArea").value = dataUrl;
});

它在 Firefox 和 IE 上运行良好，但在 Chrome 上就不行了。我用谷歌搜索并返回与 .SVG 文件有关的问题，但我没有使用任何 SVG 文件，只有 PNG 和 JPG。这是我的代码的一个小提琴：http: //jsfiddle.net/ykpCn/2/ 是因为我使用的是透明的PNG吗？不知道我做错了什么。对 HTML5 来说非常新，我希望这不是我忽略的愚蠢。

4

2 回答 2

3

显然，如果 Chrome 托管在网络服务器上，它只能在 Chrome 上运行？如果我上传到服务器然后从那里查看它可以正常工作，但在本地无法正常工作。我的问题现在很愚蠢。很抱歉浪费时间。

于 2013-01-22T11:00:12.687 回答
3

该问题与跨源资源访问有关。您在画布上渲染的图像来自不同的来源 (http://moosepi.com)。您不能对来自不同来源的图像调用 toDataURL()。

如果您启动 Chrome 开发人员工具，您会在控制台中找到它。“未捕获的错误：SECURITY_ERR：DOM 异常 18”。这是根据规范的预期行为。

解决方案： 1. 从您的服务器托管图像（可能使用代理设置）。2. 在资源上设置CORS属性。请记住，源必须设置适当的标头。

于 2013-01-22T13:12:51.933 回答