Javascript 无法在HtmlCanvaElement上执行toDataURL

从图像（本地文件）绘制画布后，我尝试使用命令

ctx.canvas.toDataURL（“image/png”）

但有一个错误：

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我已经在谷歌上搜索过了。他们说这是十字架的问题。因此，我添加了命令：

image.crossOrigin = '*';

但这对我的项目没用。实际上，我的项目是在本地构建的，没有任何服务器。所以，我不知道为什么会有跨域的问题

function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
    var image = new Image();
    image.onload = function() {
        image.crossOrigin = '*';
        resolve(image);
    };
    image.onerror = function() {
        reject(new Error('Could not load image at ' + url));
    };
    image.src = url;
});


  generate() {
    var p1 = loadImageAsync(this.textures[1]);
    var p2 = loadImageAsync(this.textures[2]);
    var p3 = loadImageAsync(this.textures[3]);
    var ctx = document.createElement("canvas")
        .getContext("2d");
    ctx.canvas.width = this.width;
    ctx.canvas.height = this.height;
    var rows = ~~(this.width / 70);
    var cols = ~~(this.height / 70);
    Promise.all([p1, p2, p3])
        .then(imgs => {
            for (let x = 0, i = 0; i < rows; x += 70, i++) {
                for (let y = 630, j = 0; j < cols; y -= 70, j++) {
                    this.resource[i].forEach(item => {
                        switch (item) {
                            case 1:
                                ctx.drawImage(imgs[0], x, y, 70, 70);
                                break;
                            case 2:
                                ctx.drawImage(imgs[1], x, y, 70, 70);
                                break;
                            case 3:
                                ctx.drawImage(imgs[2], x, y, 70, 70);
                                break;
                            default:
                        }
                    });
                }
            }
            //window.ctx = ctx;
            this.image.crossOrigin = '*';
            this.image.src = ctx.canvas.toDataURL("image/png");
        });
};

函数loadImageAsync（url）{
返回新承诺（功能（解决、拒绝）{
var image=新图像（）；
image.onload=函数（）{
image.crossOrigin='*'；
解析（图像）；
};
image.onerror=函数（）{
拒绝（新错误（'无法在'+url'加载图像））；
};
image.src=url；
});
生成（）{
var p1=loadImageAsync（this.textures[1]）；
var p2=loadImageAsync（this.textures[2]）；
var p3=loadImageAsync（this.textures[3]）；
var ctx=document.createElement（“画布”）
.getContext（“2d”）；
ctx.canvas.width=此.width；
ctx.canvas.height=此.height；
变量行=~~（this.width/70）；
var cols=~~（this.height/70）；
承诺。所有（[p1，p2，p3]）
。然后（imgs=>{
for（设x=0，i=0；i{
开关（项目）{
案例1：
ctx.drawImage（imgs[0]，x，y，70,70）；
打破
案例2：
ctx.drawImage（imgs[1]，x，y，70,70）；
打破
案例3：
ctx.drawImage（imgs[2]，x，y，70,70）；
打破
违约：
}
});
}
}
//window.ctx=ctx；
this.image.crossOrigin='*'；
this.image.src=ctx.canvas.toDataURL（“image/png”）；
});
};

加载图像时，如果图像来自另一个域，除非它们具有CORS权限，否则将标记为跨域。这包括从

文件：//

加载文件。如果使用canvas 2d，则没有CORS权限的跨域图像将污染画布，如果使用WebGL，则根本无法使用

如果文件是本地的，最好使用一个简单的服务器

如果图像实际上是跨域的，那么您需要通过设置

img.crossOrigin

请求CORS权限，服务器需要为图像返回正确的头。我相信唯一需要的头是

 Access-Control-Allow-Origin: *

在设置

img.src

之前，必须先设置

img.crossOrigin

。设置

img.crossOrigin

会告诉浏览器从服务器请求权限。在设置

img.src

时会发送请求

让我们用一个imgur URL试试，我碰巧知道它支持CORS，也就是你提到的你的URL，还有一个来自我的网站，我知道它不支持CORS

[
{url:“https://i.imgur.com/TSiyiJv.jpg，交叉原点：“*”，}，
{url:“https://newmario.herokuapp.com/img/grassMid.png，交叉原点：“*”，}，
{url:“https://greggman.com/images/echidna.jpg“，/*无CORS*/}，
].forEach（loadImage）；
函数loadImage（信息）{
const url=info.url；
常量img=新图像（）
img.onload=函数（）{
const ctx=document.createElement（“画布”）.getContext（“2d”）；
试一试{
ctx.drawImage（img，0,0）；
ctx.canvas.toDataURL（）；
日志（“已获得：，url的CORS权限）；
}捕获（e）{
日志（“**编号**CORS权限：”，url）；
}
}
img.onerror=函数（）{
日志（“无法加载图像：，url”）；
}
img.crossOrigin=info.crossOrigin；
img.src=url；
}
函数日志（…args）{
const elem=document.createElement（“pre”）；
elem.textContent=[…args].join（“”）；
文件.正文.附件（elem）；
}

---

pre{margin:0；}

您需要为onload函数之外的图像设置

交叉原点

return new Promise(function(resolve, reject) {
    var image = new Image();
    image.crossOrigin = '*';  //<-- set here
    image.onload = function() {
        resolve(image);
    };
    image.onerror = function() {
        reject(new Error('Could not load image at ' + url));
    };
    image.src = url;
});

返回新承诺（函数（解析、拒绝）{
var image=新图像（）；
image.crossOrigin='*'；//将
useCORS
设置为true可以解决此问题

html2Canvas(document.querySelector('#pdfDom'), {useCORS: true}).then((canvas) => 
{
    let pageData = canvas.toDataURL('image/jpeg', 1.0);
}

您是从其他站点加载映像吗？@moáois我尝试从本地或服务器加载映像。同样的问题是您是否运行XAMPP或WAMP之类的服务器？@moáois我的web应用程序运行在nodejs上，我没有运行XAMPP或WAMP之类的其他服务器。但实际上，我的web不需要服务器。@moáois我尝试过，它不工作。我也为映像构建了一个服务器，但它不起作用。我修改了头：var allowCrossDomain=function（req，res，next）{res.header（'Access-Control-Allow-Origin'，''）；res.header（'Access-Control-Allow-Methods'，'GET，PUT，POST，DELETE'）；res.header（'Access-Control-Allow-Headers'，''）；next（）是的，但是为什么它对我不起作用呢？你可以检查图像的响应标题。你可以看到：访问控制允许标题：*显示你的图像加载代码，同时删除这一行
this.image.crossOrigin='*'；
。为本地数据URL设置crossOrigin没有任何意义。这不是你想要的吗？是的，它现在对我使用im起作用了url上的年龄。但对于本地失败，还有另一个问题。但无论如何，它是有效的。Thx太多了！