javascript - 未捕获的 DOMException:无法在“HTMLCanvasElement”上执行“toDataURL”:可能无法导出受污染的画布
问题描述
看起来问题主要与我的 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;
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);
错误:
铬:404 错误
Firefox:没有错误,不工作。
这里的问题是我在从aws请求它之前以某种方式更改了aws s3的url吗?
解决方案
的添加:
<?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>
确实做到了。看来我只需要等待。第二天我测试并成功了!
澄清一下,上面的标头代码可能有点矫枉过正,但这是我目前所处的位置。我将测试和“调试”并删除一些允许的方法,看看哪些是不需要的。
推荐阅读
- android - 表情符号在 TextView 的缩放中变得不可见
- angular - 仅更新数组中已更改数据的对象
- python - 我可以将子进程映射到主进程运行的同一个 multiprocessing.Pool 吗?
- php - 官方示例中用于测试的命名空间对我不起作用
- java - 如何将改造和 RxJava 与多个 pojo 类一起使用?
- google-apps-script - 如何获得由 maxResults 设置的超过 50 个的更多结果?
- java - 如何在 spark 上部署 tensorflow 模型仅进行推理
- python - 通过迭代一个在 Python 中返回两个元素的元组的函数来创建两个字典
- java - 不存在类型变量 U 的实例,因此 Row 符合 Iterable
- sql-server - SQL 修订历史 - 使用 sql store_proc 删除旧记录