或

Question

我想将我的画布保存为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";
}

它给了我错误：

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

我该怎么办？

Answer 1

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

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

在测试时尝试这些解决方法：

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

Answer 2

img标签中的

将交叉原点设置为Anonymous

<img crossOrigin="Anonymous"></img>

Answer 3

如果有人对我的回答发表意见，你可能会遇到这种情况：

1。尝试使用openlayers 3或4在画布上获取地图屏幕截图 2.并查看了exporting map的例子 3.使用ol.source.XYZ渲染地图图层

宾果！

使用 ol.source.XYZ.crossOrigin =＆＃39; Anonymous＆＃39; 来解决您的混淆。或者像下面的代码：

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

Answer 4

就我而言，我正在从视频中绘制一个画布标签。为了解决受污染的画布错误，我必须做两件事：

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

确保在视频源响应中设置了Access-Control-Allow-Origin标头（正确设置了crossdomain.example.com）
将视频代码设置为crossorigin =＆＃34;匿名＆＃34;

Answer 5

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

Answer 6

如果您正在使用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

将其导出

Answer 7

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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;
}

＆＃13;

Answer 8

我使用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();
    });

Answer 9

如果要创建本地服务器，请以@markE的答案为基础。您在本地服务器上不会出现此错误。

如果您的计算机上安装了PHP：

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

或

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

打开您的终端/ cmd
导航到您的网站文件所在的文件夹
在此文件夹中，运行命令npm init -y
在Mac上运行npm install live-server -g或sudo npm install live-server -g
运行live-server，它将在您打开网站的同时在浏览器中自动打开一个新标签。

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

Answer 10

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

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

Answer 11

就我而言，我是在桌面上对其进行测试的，即使将图像本地保存到子文件夹后也出现 CORS 错误。

解决方案：

就我而言，将文件夹移动到本地服务器 WAMP。从本地服务器完美运行。

注意： 仅当您在本地保存图像时才有效。

受污染的画布可能无法出口

11 个答案:

或