Javascript 奇怪的问题是，Stackoverflow中有很多解决方案，但没有一个可以工作（在'；HTMLCanvasElement'；上执行&#toDataURL'；失败：受污染）

我正在使用验证代码自动填写插件，但遇到了一个错误。

getBase64Image(document.getElementById("J-checkcode-img"))

未捕获的DomeException:未能在“HtmlCanvaElement”上执行“toDataURL”：可能无法导出受污染的画布

错误图像：

相应的代码是：

代码图像

我在谷歌找到了很多解决方案，大部分都告诉我这是一个跨域错误。 解决方案

我可以将代码添加为

img.crossOrigin="Anonymous";

解决跨域问题，但尝试后仍给出错误 接下来，我在stackoverflow上找到了这类问题的解决方案

明白了

img.crossOrigin="";

添加后仍然添加

此解决方案在其他页面上是可行的，即不能终止或终止此页面

测试：

测试URL:：

1.在控制台中输入功能

getBase64Image(document.getElementById("J-checkcode-img"))

例如：

function getBase64Image(im)
{
  im.crossOrigin="";
    var canvas = document.createElement("canvas");
  canvas.width = im.width;
    canvas.height = im.height;
    var ctx = canvas.getContext("2d");
  ctx.drawImage(im, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace("data:image/png;base64,", "");
}

2.下一步

getBase64Image(document.getElementById("J-checkcode-img"))

我对JavaScript开发了解不多

我已经很久没有在互联网上找到合适的解决方案了

---

我不知道怎么解决它。我希望你能帮忙，谢谢

在您的研究中，您似乎了解了该属性，它确实是访问跨来源资源数据所必需的

然而，你似乎并不清楚它是如何工作的

此属性是一个标志，用于浏览器了解他们是否必须使用CORS头请求元素获取的资源，以便服务器可以使用正确的Allow Origin头（或拒绝）向他们发送响应

但是这个属性本身并不调用任何东西，它是一个突出的标志，只有在提取元素的资源时才会被访问。
这意味着要使其产生任何效果，必须在设置元素的

src

之前设置它

因此，当您在代码中执行

im.crossOrigin=“”

由于在此设置之后没有再次设置

src

，因此获取的资源没有正确的允许源标题，并且该资源被标记为违反相同的源策略，因此会污染画布

现在，请注意，有些浏览器确实要求服务器至少发送一个

Vary:Origin

头，甚至是

Allow Origin:

，即使是对于愿意跨源的请求也是如此

因此，最好从第一个请求开始设置

crossOrigin

属性，您不会显示它在代码中的位置，但以下两种情况都有：

onload=e=>{
const img2=新图像（）；
img2.crossOrigin=“；//在设置src之前设置它
img2.onload=draw；//等待加载
img2.src=”https://commons.wikimedia.org/static/images/project-logos/commonswiki.png";
};
函数绘制（evt）{
const img1=document.getElementById（'img1'）；
常数img2=此；
const canvas=document.createElement（'canvas'）；
const ctx=canvas.getContext（'2d'）；
画布高度=200；
ctx.drawImage（img2,50,0200200）；
ctx.drawImage（img1,0,0300200）；
//导出到
#img1{
显示：无；
}

这家伙建议通过您的服务器代理图像，使其看起来来自同一个域，从而避免任何与CORS相关的问题：谢谢，我正在做一个验证代码来自动填充插件，因此可能我无法正确配置服务器。但您所说的话仍然非常鼓舞我，也许我应该考虑一下这个插件应该继续这样做。