Javascript 受污染的画布不得出口

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

这给了我一个错误：

未捕获的安全性错误：未能对“HTMLCanvasElement”执行“toDataURL”：可能无法导出受污染的画布

---

我该怎么办？

看起来您使用的图像来自一个URL，该URL没有设置正确的访问控制允许源标题，因此出现了问题。。您可以从服务器获取该映像并从服务器获取，以避免CORS问题。

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

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

测试时，请尝试以下解决方法：

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

• 将图像发布到支持跨域共享的站点（如dropbox.com或GitHub）。请确保将图像放入dropbox的公用文件夹，并在下载图像时设置交叉源标志（

  var img=new image（）；img.crossOrigin=“anonymous”

  …）

• 在开发计算机上安装一个web服务器（IIS和PHP web服务器都有免费版本，在本地计算机上运行良好）

---

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

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

---

如果使用的是

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

导出它。如果有人查看我的答案，您可能处于以下情况：

一,。尝试使用openlayers（版本>=3）在画布中获取地图截图
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"
     })
 });

在OpenLayers6中，ES6改变了一些东西。然而，代码是相似的

import { XYZ } from 'ol/source'
import { Tile as TileLayer } from 'ol/layer'
const baseLayer = new TileLayer({
    name : 'basic',
    source: new XYZ({
      url: 'example.tile.com/x/y/z', // your tile url
      crossOrigin: 'Anonymous',
      // remove this function config if the tile's src is nothing to decorate. It's usually to debug the src
      tileLoadFunction: function(tile, src) {
        tile.getImage().src = src
      }
    })
  })

更多信息，请从MDN中签出。 基本上，您必须有一个服务器承载具有适当访问控制允许源标题的图像

SetEnvIf原点“：”是
标题集访问控制允许原点“*”env=IS\u CORS

在我的例子中，我是从视频中画到画布标签上的。为了解决受污染的画布错误，我必须做两件事：

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

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

---

我使用

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

html2canvas（document.getElementsByClassName（“可拖放区域”）[0]，{useCORS:true}）。然后（函数（画布）{
var imgBase64=canvas.toDataURL（）；
//log（“imgBase64:”，imgBase64）；
var imgURL=“data:image/”+imgBase64；
var triggerDownload=$（“”）attr（“href”，imgURL）.attr（“下载”，“布局”+新日期（）.getTime（）+”.jpeg”）.appendTo（“正文”）；
触发器下载[0]。单击（）；
triggerDownload.remove（）；
});

我还通过在我的代码中添加

useCORS:true，

解决了这个错误，如-

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

---

如果你想创建一个本地服务器，就像@markE的答案一样。在本地服务器上不会出现此错误

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

打开终端/cmd

导航到网站文件所在的文件夹

在该文件夹中，运行命令

php-S localhost:3000

← 注意首都的

打开浏览器，在URL栏中转到localhost:3000。你的网站应该在那里运行

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

打开终端/cmd

导航到网站文件所在的文件夹

在此文件夹中，运行命令

npm init-y

在mac上运行

npm安装live server-g

或

sudo npm安装live server-g

运行

live server

，它会自动在浏览器中打开一个新选项卡，同时打开您的网站

---

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

在我的情况下，我是在桌面上测试它的，即使在将图像本地保存到子文件夹后也会出现CORS错误

解决方案：

在我的案例中，已将文件夹移动到本地服务器WAMP。在本地服务器上工作得很好

注意：

---

仅当您将图像保存在本地时才有效。

在哪个浏览器中？声称这是一个bug。在chrome和Firefox上，你能不能更准确地给出你的答案，因为我并不完全了解这个概念。如何从我的服务器获取该图像？您从哪里获取该图像，是从您的服务器还是其他服务器获取的？它是这样的：loadImage（“example.jpg”，0，0，500，300）；我可以将随机图像url或图像放在我计算机的同一文件夹中，它仍然是sameyes，但我刚刚在paint上创建了图像，它仍然是sameI授予的访问控制允许来源：*对于该文件，但仍然显示错误谢谢，设置img.crossOrigin属性帮助了我@markE-我从localStorage加载图像数据，而不是从文件或任何url加载，然后对其进行一些操作，如添加文本。然后尝试使用toDataURL（）将其恢复到本地存储。但它显示“未能在“HtmlCanvaElement”上执行“toDataURL”：可能无法导出受污染的画布”。在这种情况下，我没有使用任何外部文件或url来获取跨域问题。那么为什么会导致此错误？@Saijth-您可能需要验证用于图像的路径。我也有这个问题，因为我正在测试通过IP（127.0.x.x/）直接访问我的本地虚拟服务器，但是一些映像通过域链接(