hml5 toDataUrl（）不适用于chrome [英] hml5 toDataUrl() not working on 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来说，这是一个新东西，我希望它不是我忽视的东西。

解决方案

访问。您在画布上呈现的图像来自不同的来源（http://moosepi.com）。您不能在来自不同来源的图片上调用toDataURL（）。

如果您启用了Chrome开发人员工具，则可以在控制台中找到它。 未捕获的错误：SECURITY_ERR：DOM异常18。这是按照 1.从您的服务器托管映像（可能使用代理服务器设置） 。
2.设置 CORS 属性。请记住源代码必须设置适当的标题。

I do this:

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

It works great on Firefox and IE, but no luck with Chrome. I googled and came back with the issue relating to .SVG files, but I'm not using any SVG files, only PNG and JPG. Here is a fiddle of my code: http://jsfiddle.net/ykpCn/2/ Is it because I'm using transparent PNGs? Not sure what I'm doing wrong. Very new to HTML5, I hope it's not something stupid that I've overlooked.

解决方案

The issue is related to Cross origin resource access. The image you have rendered on the canvas is from a different origin (http://moosepi.com). You can't call toDataURL() on images which are from different origins.

If you fire up your Chrome developer tools, you will find this in your console. "Uncaught Error: SECURITY_ERR: DOM Exception 18". This is the expected behavior as per the spec.

Solution: 1. Host the images from your server (may be using a Proxy setup). 2. Set CORS attribute on the resource. Remember the source must set the appropriate headers.

这篇关于hml5 toDataUrl（）不适用于chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！