所以我正在使用谷歌地图,我得到的照片看起来像这样
<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,/, ""));
};
}
但是我遇到了这个问题:
未捕获到的SecurityError:无法在“ HTMLCanvasElement”上执行“ toDataURL”:受污染的画布可能无法导出。
我搜索了修复程序。我在这里找到了如何使用CORS,但仍然无法将这两段代码捆绑在一起以使其正常工作。也许我做错了方法,并且有一种更简单的方法?我正在尝试保存此图片,以便可以将数据传输到服务器。因此,也许有人做了这样的事情,并且知道如何根据.toDataURL()
需要进行工作?
除非Google使用正确的Access-Control-Allow-Origin
标题提供此图片,否则您将无法在画布中使用其图片。这是由于未获得CORS
批准。
尽管您可以在画布中使用未经CORS批准的图像,但这样做会污染画布。画布污染后,您将无法再将数据拉出画布。例如,您将无法再使用画布的toBlob(),toDataURL()或getImageData()方法。这样做会引发安全错误。
通过使用图像在未经许可的情况下从远程网站中提取信息,可以防止用户暴露私人数据。
我建议仅将URL传递到您的服务器端语言,然后使用curl来下载图像。不过要小心消毒!
编辑:
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
仅 当您具有正确的权限时,此方法 才 有效,但至少将允许您执行所需的操作。
问题内容: 我需要做一个svg导出png图像功能。首先,我也生成了具有base64标头类型的svg到base64 ,然后 我的/ 可能很大。 当我使用它返回。当/ 更合理时,结果正确。 有什么好办法解决这个问题吗?还是使用javascript从转换为.png? 问题答案: Canvas元素的最大大小在浏览器实现中会有所不同。您可以在此Q / A中 找到这些最大尺寸的良好列表。 它们对导出方法也有限
问题内容: 我睡眠不足吗?以下代码 抛出此错误: 这绝对是行不通的!有人可以解释一下吗? 问题答案: 在规格中它说: 每当调用其origin-clean标志设置为false的canvas元素的toDataURL()方法时,该方法都必须引发SECURITY_ERR异常。 如果图像来自其他服务器,我认为您不能使用toDataURL()
本文向大家介绍快速解决Canvas.toDataURL 图片跨域的问题,包括了快速解决Canvas.toDataURL 图片跨域的问题的使用技巧和注意事项,需要的朋友参考一下 如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: 【Redirect at origin 'http://sub1.xx.com' has
问题内容: 我正在HTML页面中加载,并尝试使用Javascript访问其中的元素,但是当我尝试执行代码时,出现以下错误: 您能否帮助我找到解决方案,以便我可以访问框架中的元素? 我正在使用此代码进行测试,但徒劳无功: 问题答案: 同源政策 您无法使用JavaScript访问其他来源的内容,如果可以的话,这将是一个巨大的安全漏洞。对于同源策略,浏览器会阻止脚本尝试访问来源不同的框架。 如果未保留地
问题内容: 嗨,我正在通过Cordova(5.1.1)/ Phonegap构建iOS应用程序,但有一个我无法解决的问题。 一个基本的电话抛出一个问题,我尝试了所有有关白名单的技巧,但现在我迷路了。有谁可以帮助您?谢谢。 准备好设备后,我会执行以下操作: getUrl是:http : //shopplo.com/api/posts/radius/37.11032230061141x73.110322
我在我的页面上设置了一个iFramework,并使用下面的脚本来删除双导航栏。它在任何浏览器上都能很好地工作,但在Chrome上不起作用,它显示了双垂直导航栏! 我在Chrome收到2个错误消息: > 第一条错误消息: 未捕获的安全错误:阻止源为“null”的帧访问源为“null”的帧。协议、域和端口必须匹配。 它指出了以下错误: 第二个错误消息,它位于jquery-1.10.2.js: 未捕获的