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画布，该画布被Amazon s3的图像污染。我不确定到底发生了什么。

当我尝试通过单击保存来保存画布时：

控制台上的Chrome错误：未捕获DOMException：无法在“ HTMLCanvasElement”上执行“ toDataURL”：可能无法导出污染的画布。

控制台上的FireFox错误：操作不安全

https://jsfiddle.net/je3mL5go/1/

在jsfiddle中，当出现添加的行}, {crossOrigin: 'Anonymous'});时，它起作用。

使用s3图片在Heroku上进行制作：

在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;

   function loadCORS(){
     var with_cors = new Image();
     with_cors.crossOrigin = 'anonymous';
     with_cors.src = no_cors.src;
     with_cors.onload = function(){console.log('loaded');};
     with_cors.onerror = function(){console.error('failed');};
     fabric.Image.fromURL(with_cors.src, function(img) {
     img.scaleToHeight(300);
     img.scaleToWidth(300);
     canvas.centerObject(img);
     canvas.add(img);
     canvas.renderAll();
   }, {crossOrigin: 'anonymous'});
  }
};

var images = <%= images_2.to_h.to_json.html_safe %>
document.getElementById("tshirt-design").addEventListener("change", function(){
    updateTshirtImage(images[this.value]);
}, false);

错误：

Chrome浏览器：404错误

Firefox：没有错误，无法正常工作。

这里的问题是我在以某种方式从aws要求aws s3之前更改了aws s3的网址吗？

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>

实际上可以解决问题。看起来我只需要等待。第二天，我进行了测试，并且成功了！

为澄清起见，上面的标头代码可能有些过分，但这就是我目前所在的位置。我将进行测试和“调试”，并删除一些允许的方法，并查看哪些和哪些不需要。

未捕获的DOMException：无法在“ HTMLCanvasElement”上执行“ toDataURL”：可能无法导出污染的画布

1 个答案: