jquery - hml5 toDataUrl() 在 Chrome 上不起作用

Question

我这样做:

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

它在 Firefox 和 IE 上运行良好，但在 Chrome 上却不太好用。我用 google 搜索并返回与 .SVG 文件相关的问题，但我没有使用任何 SVG 文件，仅使用 PNG 和 JPG。这是我的代码的 fiddle :http://jsfiddle.net/ykpCn/2/是因为我使用的是透明PNG吗？不确定我做错了什么。对 HTML5 非常陌生，我希望这不是我忽略的愚蠢的事情。

Answer 1

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

如果您启动 Chrome 开发者工具，您会在控制台中找到它。 “ Uncaught Error :SECURITY_ERR:DOM 异常 18”。这是 spec 中的预期行为.

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