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,/, "")); }; } 

但是我得到这个问题:

Uncaught SecurityError:无法执行“HTMLCanvasElement”上的“toDataURL”:受污染的canvas可能无法导出。

我寻找修复。 我在这里find了一个示例如何使用CORS,但我仍然不能将这两个代码绑在一起,使其工作。 也许我做错了,有一个更简单的方法来做到这一点? 我试图保存这张照片,以便我可以将数据传输到我的服务器。 所以也许有人做了这样的事情,知道如何使.toDataURL()工作,因为我需要它?

除非谷歌提供正确的Access-Control-Allow-Origin标题的图像,那么你将无法在canvas中使用他们的图像。 这是由于没有CORS批准。 你可以在这里阅读更多关于这个,但它实质上意味着:

尽pipe可以在canvas中使用没有CORS批准的图像,但这样做会污染canvas。 一旦一个canvas被污染了,你不能再从canvas中取出数据。 例如,您不能再使用canvastoBlob(),toDataURL()或getImageData()方法; 这样做会导致安全错误。

这样可以防止用户使用图像暴露隐私数据,以便在未经许可的情况下从远程网站获取信息。

我build议只是将URL传递给您的服务器端语言并使用curl来下载图像。 小心消毒,但!

编辑:

由于这个答案仍然是被接受的答案,你应该看看@ shadyshrif的答案 ,这是使用:

 var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url; 

只会在你拥有正确的权限时起作用,但至less可以让你做你想做的事情。

只需使用crossOrigin属性并将'anonymous'作为第二个参数

 var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url; 

尝试下面的代码…

 <img crossOrigin="anonymous" id="imgpicture" fall-back="images/penang realty,Apartment,house,condominium,terrace house,semi d,detached, bungalow,high end luxury properties,landed properties,gated guarded house.png" ng-src="https://www.google.comhttp://img.dovov.combranding/googlelogo/2x/googlelogo_color_272x92dp.png" height="220" width="200" class="watermark"> 

此方法将防止您从正在访问的服务器获取“Access-Control-Allow-Origin”错误。

 var img = new Image(); var timestamp = new Date().getTime(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url + '?' + timestamp; 

通过使用面料js我们可以解决这个安全错误问题在IE中。

  function getBase64FromImageUrl(URL) { var canvas = new fabric.Canvas('c'); var img = new Image(); img.onload = function() { var canvas1 = document.createElement("canvas"); canvas1.width = this.width; canvas1.height = this.height; var ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0); var dataURL = canvas.toDataURL({format: "png"}); }; img.src = URL; }