画布到图像无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出污染的画布 [英] canvas to image Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

问题描述

我正在使用 $ scope.picture.picture.data.url 从facebook api获取图片，它可以正确将其渲染到画布上，但是当我想将其更改为 dataUrl 它使我得到这个错误

I am getting a picture from facebook api with $scope.picture.picture.data.url it correctly renders it to canvas but when I want to change it to dataUrl it get me this error

画布以成像无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出污染的画布。 / p>

canvas to image Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

画布渲染如下

 var canv=document.getElementById("mainCanvasD");
       var ctx = canv.getContext('2d');

       ctx.clearRect(0,0,540,320);
       // $scope.picture used here
       // draw games background image here 
       // console.log($scope.picture.picture.data.url);

       drawUrlImage($scope.picture.picture.data.url,10,130,180,180,"mainCanvasD");
       drawUrlImage("http://localhost/ezone/public/game/"+$scope.gameName+"/right/"+generateRandom(6)+".jpg",240,130,180,180,"mainCanvasD");

，并且正在使用此代码将其更改为dataUrl

and am using this code to chnage it to dataUrl

 var canv=document.getElementById("mainCanvasD");

   var dataURL = canv.toDataURL('image/jpg');
   documentData={"image":dataURL,"gameName":$scope.gameName,"userId":$scope.userId,"gameId":$scope.gameId};

推荐答案

出于安全原因，您无法访问画布的内容如果您在域之外绘制了一些东西，在这种情况下，这是来自Facebook的图片。
在这种情况下，画布变脏了。您仍然可以在它上面绘制其他内容，用户可以看到它，但是您不能再以编程方式阅读它。

For security reasons you cannot access the content of a canvas if you draw something onto it which comes outside of your domain, in this case an image from facebook. The canvas becomes tainted in this case. You can still draw other stuff to it, the user sees it, but you are not allowed to programatically read it anymore.

这篇关于画布到图像无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出污染的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！