hml5 toDataUrl（）无法处理chrome

Question

我这样做：

$('#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来说很新，我希望这不是我忽略的愚蠢。

Answer 1

显然，只有在网络服务器托管的Chrome上才能使用Chrome？如果我上传到服务器然后从那里查看它，它将工作正常，但不会在本地工作。我的问题现在很愚蠢。抱歉浪费时间。

Answer 2

此问题与跨源资源访问有关。您在画布上呈现的图像来自不同的来源（http://moosepi.com）。您无法对来自不同来源的图像调用dataURL（）。

如果您启动Chrome开发者工具，您将在控制台中找到它。 ＆＃34;未捕获错误：SECURITY_ERR：DOM例外18＆＃34;。这是spec的预期行为。

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