hml5 toDataUrl（）无法处理chrome

我这样做：

$('#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

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

如果您启动Chrome开发者工具，您将在控制台中找到它。 “未捕获错误：SECURITY_ERR：DOMexception18”。 这是符合规范的预期行为。

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

Answer 2

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