首页 文章

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

提问于
浏览 次
118

我想将我的画布保存为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'：可能无法导出受污染的画布 .

我该怎么办？

javascript html5-canvas

7 回答

  • 5

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

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

    答对了！

    使用 ol.source.XYZ.crossOrigin = 'Anonymous' 来解决您的困惑 . 或者像下面的代码：

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

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

    回复于
  • 8

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

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

    在测试时尝试以下解决方法：

    • 将所有与页面相关的文件（.html，.jpg，.js，.css等）放在桌面上（不在子文件夹中） .

    • 将您的图像发布到支持跨域共享的网站（例如dropbox.com） . 确保将图像放在Dropbox的公共文件夹中，并在下载图像时设置交叉原点标记（var img = new Image（）; img.crossOrigin =“anonymous”...）

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

    回复于
  • 4

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

    <img crossOrigin="Anonymous"></img>
    回复于
  • 1

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

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

    • 确保在视频源响应中设置了Access-Control-Allow-Origin标头（正确设置crossdomain.example.com）

    • 将视频代码设置为crossorigin = "anonymous"

    回复于
  • 85

    从MDN查看CORS enabled image . 基本上，您必须拥有一个托管具有相应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;
}
    回复于
  • 2

    如果您正在使用 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 将其导出

    回复于

相关问题