未捕获的 DOMException：无法在“HTMLCanvasElement”

Question

看起来这个问题主要与我的 aws s3 存储桶 CORS 配置有关我补充说：<?xml version="1.0" encoding="UTF-8"?><CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule>    <AllowedOrigin>https://www.example.com</AllowedOrigin>    <AllowedMethod>PUT</AllowedMethod>    <AllowedMethod>POST</AllowedMethod>    <AllowedMethod>DELETE</AllowedMethod>    <AllowedMethod>GET</AllowedMethod>    <AllowedMethod>HEAD</AllowedMethod>    <AllowedHeader>*</AllowedHeader></CORSRule></CORSConfiguration>到我的存储桶 CORS 配置，但这也无济于事。出于某种原因，我可以将照片添加到画布（取决于代码）但无法使用来自 AWS 的图像保存画布我有一个 fabric.js 画布，它被亚马逊 s3 的图像污染了。我不确定到底发生了什么。当我尝试通过单击保存来保存画布时：控制台上的 Chrome 错误：未捕获的 DOMException：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。控制台上的 FireFox 错误：操作不安全https://jsfiddle.net/je3mL5go/1/在 jsfiddle 中，它在添加的行}, {crossOrigin: 'Anonymous'});存在时起作用。在 Heroku 上使用 s3 图像进行生产：在 FireFox 中，我可以从选择菜单中选择一个图像并将其添加到画布中。我会得到前面提到的错误，但如果我反复单击“保存”按钮，在点击次数足够多（通常是 5-30 次）后，我可以将画布另存为 png。在 Chrome 中，这种“hack”似乎根本不起作用。这背后有解释吗？似乎因为我在 AWS S3 中托管图像，这也会影响它。但即使这样，上面的例子（在 FireFox 中重复点击）仍然有效。尝试：和：function updateTshirtImage(imageURL){  fabric.Image.fromURL(imageURL, function(img) {    img.scaleToHeight(300);    img.scaleToWidth(300);    img.crossOrigin = 'anonymous';    canvas.centerObject(img);    canvas.add(img);    canvas.renderAll();  });};我可以上传图片，但是当我点击保存时：我得到与上面相同的错误。当我使用：function updateTshirtImage(imageURL){  fabric.Image.fromURL(imageURL, function(img) {     img.scaleToHeight(300);     img.scaleToWidth(300);     canvas.centerObject(img);     canvas.add(img);     canvas.renderAll();  }, {crossOrigin: 'anonymous'});};选择图片上传时出错No 'Access-Control-Origin-Header' is present...试图：function updateTshirtImage(imageURL){   var rand = '?'+Math.random();   var no_cors = new Image();   no_cors.onload = loadCORS;   no_cors.src = imageURL + rand;错误：Chrome：404 错误Firefox：没有错误，不工作。这里的问题是我在从 aws 请求之前以某种方式更改了 aws s3 的 url？

Answer 1

添加：

<?xml version="1.0" encoding="UTF-8"?>

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">

<CORSRule>

    <AllowedOrigin>https://www.example.com</AllowedOrigin>

    <AllowedMethod>PUT</AllowedMethod>

    <AllowedMethod>POST</AllowedMethod>

    <AllowedMethod>DELETE</AllowedMethod>

    <AllowedMethod>GET</AllowedMethod>

    <AllowedMethod>HEAD</AllowedMethod>

    <AllowedHeader>*</AllowedHeader>

</CORSRule>

</CORSConfiguration>

实际上做到了。看起来我只需要等待。第二天我测试了，它奏效了！

澄清一下，上面的头代码可能有点矫枉过正，但这是我目前所处的位置。我将测试和“调试”并删除一些允许的方法，看看哪些和哪些不需要。