被污染的画布可能无法导出

我想将画布保存为img。我具有此功能：

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

它给我错误：

未捕获到的SecurityError：无法在'上执行'toDataURL' HTMLCanvasElement'：受污染的画布可能无法导出。

我该怎么办？

在什么浏览器中？ stackoverflow.com/a/21362569/476716声称这是一个错误。

在chrome和firefox上

developer.mozilla.org/zh-CN/docs/Web/HTML/…

#1 楼

出于安全原因，您的本地驱动器被声明为“其他域”，并且会污染画布。

（这是因为您最敏感的信息可能在您的本地驱动器上！）。

进行测试时，请尝试以下变通办法：

将所有与页面相关的文件（.html，.jpg，.js，.css等）放到您的桌面上（而不是子文件夹中）文件夹）。
将图像发布到支持跨域共享的网站（例如dropbox.com）。确保将图像放入Dropbox的公用文件夹中，并在下载图像时设置跨源标记（var img = new Image（）; img.crossOrigin =“ anonymous” ...）
在您的计算机上安装网络服务器开发计算机（IIS和PHP Web服务器都有免费版本，可以在本地计算机上很好地工作）。

谢谢，设置img.crossOrigin属性对我有帮助！

– zumek
2014年12月1日，9：48

@markE-我从localStorage加载图像数据，而不是从文件或任何URL加载，然后对其进行了一些操作，例如添加文本。然后尝试使用toDataURL（）将其重新存储到localStorage。但是它显示“无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出污染的画布”。在这种情况下，我没有使用任何exteranl文件或url来获得跨域问题。那为什么会导致这个错误呢？

– Sajith
2015年2月25日在5:19

@Saijth-您可能要验证用于图像的路径。我也有这个问题，因为我正在通过IP（127.0.x.x /）直接测试本地虚拟服务器的访问权限，但是有些图像是通过域（localhost /）链接的。一旦我使用本地主机，它就会解决。因此，请确保您不会遇到类似问题。

–维克多D.
15年5月25日在21:16

（1）从xampp Web服务器（本地主机/文件）而不是c：/ localdisk / file查看它； chrome不会抱怨安全错误。（2）或在启动chrome时使用此标志：--allow-file-access-from-files

–莫什
16年8月22日在7:48

只是增加了另一个可能的问题：如果您尝试导出包含带有ForeignObject的svg的画布，则某些浏览器会将其标记为已污染。

–HairyFotr
18-10-7在11:03

#2 楼

在img标签中，将crossorigin设置为Anonymous。

<img crossorigin="anonymous"></img>

但是在html5 canvas而不是img元素的情况下该怎么办

–graphics123
16-10-4在6:57

对于canvas元素，问题的根源总是在于您要在其上绘制的某些图像。因此，在加载图像之前，您只需要跟踪图像并按照指示设置其crossOrigin属性即可。

–费南多·埃切维里亚（Fernando Echeverria）
17年8月16日在11:53

这挽救了我的一天！

–常
18年2月7日在16:32

乐于帮助：）

–Annia Martinez
18年2月12日在15:18

它在办公室凌晨12点，我找到了这个简单的答案，这是纯粹的幸福

– Dheeraj
19年1月22日在18:35

#3 楼

如果有人查看我的答案，则您可能处于这种情况：
1。尝试使用openlayers（版本> = 3）在画布中获取地图屏幕截图
2。并查看了导出地图的示例
3。使用ol.source.XYZ渲染地图图层
Bingo！
使用ol.source.XYZ.crossOrigin ='Anonymous'解决您的困惑。
或类似以下代码：

     var baseLayer = new ol.layer.Tile({
         name: 'basic',
         source: new ol.source.XYZ({
             url: options.baseMap.basic,
             crossOrigin: "Anonymous"
         })
     });

太棒了。适用于所有来源，例如TileImage等。

–菲尔
18-10-18在22:41

太棒了！正是我在寻找自己的东西，轻松解决了我正在执行的OpenLayers演示。

– Marc
19/12/17在22:37

我正在使用矢量平铺图层，并将此属性添加到源后，但它也无法正常工作！

–mahdi n75
4月29日12:59

正是我需要的:)

–雷
6月25日22:28

我正在使用ol6。但它不起作用，添加此行后没有更改

– Adithya
10月6日9:05

#4 楼

如果您使用的是ctx.drawImage()函数，则可以执行以下操作：

var img = loadImage('../yourimage.png', callback);

function loadImage(src, callback) {
    var img = new Image();

    img.onload = callback;
    img.setAttribute('crossorigin', 'anonymous'); // works for me

    img.src = src;

    return img;
}

现在在回调中，您可以使用ctx.drawImage并使用toDataURL
导出它

这对我不起作用。仍在获取污染的画布可能无法导出。错误信息。

–山姆·斯维尔科（Sam Sverko）
19-09-19在20:07

这个对我有用。谢谢。 @SamSverko确保在img.src之前设置属性。

–aijogja
5月25日23:03

#5 楼

就我而言，我是从视频中绘制画布标签。要解决受污染的画布错误，我必须做两件事：

<video id="video_source" crossorigin="anonymous">
    <source src="http://crossdomain.example.com/myfile.mp4">
</video>

确保在视频源响应中设置了Access-Control-Allow-Origin标头（正确设置crossdomain.example.com）
将视频代码设置为具有crossorigin =“ anonymous”

#6 楼

我使用useCORS: true选项解决了问题

 html2canvas(document.getElementsByClassName("droppable-area")[0], { useCORS:true}).then(function (canvas){
        var imgBase64 = canvas.toDataURL();
        // console.log("imgBase64:", imgBase64);
        var imgURL = "data:image/" + imgBase64;
        var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_"+new Date().getTime()+".jpeg").appendTo("body");
        triggerDownload[0].click();
        triggerDownload.remove();
    });

#7 楼

好像您正在使用未设置正确的Access-Control-Allow-Origin标头的URL来的图像，因此是问题。.您可以从服务器获取该图像，并从服务器获取该图像，以避免CORS问题。 br />

您能否更精确地回答您的问题，因为我并不真正了解所有概念。如何从服务器中获取该图像？

–user3465096
2014年3月28日在12:53

您是从哪里获取该图像的，是从服务器还是其他某个服务器获取的？

– Prasanna Aarthi
2014年3月28日在12:57

它是这样的：loadImage（“ example.jpg”，0，0，500，300）;我可以将随机图片网址或图片放在计算机上的同一文件夹中，

–user3465096
2014年3月28日12:59

是的，但是我只是在油漆上创建了图像，仍然是一样的

–user3465096
2014年3月28日13:38

我为文件提供了Access-Control-Allow-Origin：*，但仍然显示错误

– Harikrishnan
16年7月12日在11:13

#8 楼

从MDN中检出[启用了CORS的图像] [1]。
基本上，您必须拥有一台托管具有相应Access-Control-Allow-Origin标头的图像的服务器。

 <IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

您将能够将这些图像保存到DOM Storage中，就像它们是从您的域中提供的一样，否则您将遇到安全问题。

 var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

尽管此链接可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。如果链接的页面发生更改，仅链接的答案可能会失效。 -来自评论

– Gowtham Shiva
17年11月24日在7:59

感谢您的通知。我只是从MDN链接添加内容：）

– BerlinaLi
17年11月27日在2:15

#9 楼

就像建立在@markE的答案上一样（如果要创建本地服务器）。在本地服务器上不会出现此错误。
如果您的计算机上安装了PHP：

打开终端/ cmd
导航到网站所在的文件夹中文件是
，在此文件夹中，运行命令php -S localhost:3000←注意大写的'S'
打开浏览器，然后在URL栏中转到localhost：3000。您的网站应该在那里运行。

或
如果您的计算机上安装了Node.js：

打开终端/ cmd
导航进入您的网站文件所在的文件夹中
，在此文件夹中，在Mac上运行命令npm init -y

运行npm install live-server -g或sudo npm install live-server -g
运行live-server，它将自动打开一个新的浏览器中打开您的网站标签。

注意：请记住在文件夹的根目录中有一个index.html文件，否则您可能会遇到一些问题。

#10 楼

我还通过在代码中添加useCORS : true,来解决此错误，例如-

html2canvas($("#chart-section")[0], {
        useCORS : true,
        allowTaint : true,
        scale : 0.98,
        dpi : 500,
        width: 1400, height: 900
    }).then();

编程黑洞网