canvas.toDataURL() SecurityError
所以我使用谷歌地图，我得到了图片，它看起来是这样的
<img id="staticMap"
src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false">我需要保存它。我发现了这个：
function getBase64FromImageUrl(URL) {
var img = new Image();
img.src = URL;
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
};
}但我有个问题：
HTMLCanvasElement未捕获到SecurityError:未能对“”HTMLCanvasElement“”执行“”toDataURL“”：可能无法导出受污染的画布。“
我搜索了修复程序。我在这里找到了一个How to use CORS示例，但我仍然无法将这两段代码绑定在一起来使其工作。也许我做错了，有更简单的方法吗？我正在尝试保存这张照片，这样我就可以将数据传输到我的服务器。所以，也许有人做了这样的事情，并且知道如何让.toDataURL()在我需要的时候工作？
回答 8
Stack Overflow用户
发布于 2013-12-06 20:54:52
除非谷歌使用正确的Access-Control-Allow-Origin头提供此图像，否则您将无法在canvas中使用它们的图像。这是由于没有获得CORS的批准。您可以阅读有关此here的更多信息，但它本质上意味着：
虽然您可以在没有CORS批准的情况下在画布中使用图像，但这样做会污染画布。一旦画布被污染，您就不能再从画布中拉回数据。例如，您不能再使用canvas toBlob()、toDataURL()或getImageData()方法；这样做会抛出安全错误。
这可以防止用户在未经许可的情况下使用图像从远程网站拉取信息，从而防止用户暴露私人数据。
我建议只将URL传递给您的服务器端语言，并使用curl下载图像。不过，要小心清理它！
编辑：
由于此答案仍然是公认的答案，因此您应该查看@shadyshrif's answer，它将使用：
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;这将只工作，如果你有正确的权限，但至少会允许你做你想做的事情。
Stack Overflow用户
发布于 2014-12-03 06:38:16
只需使用crossOrigin attribute并将'anonymous'作为第二个参数传递
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;Stack Overflow用户
发布于 2017-03-28 22:45:28
此方法将防止您从要访问的服务器收到“Access-Control-Allow-Origin”错误。
var img = new Image();
var timestamp = new Date().getTime();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url + '?' + timestamp;https://stackoverflow.com/questions/20424279
复制相似问题