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

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"...)

• 在开发计算机上安装Web服务器(IIS和PHP Web服务器都具有可在本地计算机上正常运行的免费版本).

Answer 2

在img标签中设置交叉原点为Anonymous

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

Answer 3

如果有人看到我的答案,你可能会遇到这种情况:

1.尝试使用openlayers 3或4在画布中获取地图屏幕截图
2.并查看导出地图的示例
3.使用ol.source.XYZ渲染地图图层

答对了!

使用ol.source.XYZ.crossOrigin ='Anonymous'来解决您的混淆.或者像下面的代码:

     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 ="anonymous"

Answer 5

我使用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 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 的映像。基本上，您必须有一个托管具有适当 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 存储，就像它们是从您的域提供的一样，否则您将遇到安全问题。

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // 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;
}

Answer 8

这个可以在laravel中顺利运行。

首先，您需要将受污染的画布转换为斑点。之后，您可以上传一个 blob 来提供服务并将其保存为图像。在 ajax 调用中返回图像 URL。

这是上传画布 blob 的 ajax 调用。

$("#downloadCollage").click(function(){
  canvas.toBlob(function(blob){

    var formDataToUpload = new FormData();
    formDataToUpload.append("_token", "{{ csrf_token() }}");
    formDataToUpload.append("image",  blob);

    $.ajax({
        url:"{{ route('selfie_collage_upload') }}",
        data: formDataToUpload,
        type:"POST",
        contentType:false,
        processData:false,
        cache:false,
        dataType:"json",
        error:function(err){
            console.error(err);
        },
        success:function(data){
            window.location.href= data.url;
        },
        complete:function(){
        }
    });
  },'image/png');
  link.click();
});

Answer 9

似乎您正在使用未设置正确的Access-Control-Allow-Origin标头的URL中的图像，因此也出现了问题。

Answer 10

就像@markE 答案的基础上一样。您可以通过本地服务器为您的网站提供服务。在本地服务器上不会出现此错误。

如果您的计算机上安装了 PHP（某些较旧的 MacOS 版本已预安装）：

1. 打开你的终端/cmd
2. 导航到您的网站文件所在的文件夹
3. 在此文件夹中，运行命令php -S localhost:3000
4. 打开浏览器并在 URL 栏中转到localhost:3000。您的网站应该在那里运行。

或者

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

1. 打开你的终端/cmd
2. 导航到您的网站文件所在的文件夹
3. 在此文件夹中，运行命令npm init -y
4. 运行npm install live-server -g或sudo npm install live-server -g在 Mac 上
5. 运行live-server它应该会自动在浏览器中打开一个新选项卡并打开您的网站。

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