javascript - s3-amazon 图像 CORS 问题(仅在 5-8 小时后发生在少数浏览器中)
问题描述
目前,当我尝试从 s3 照片中获取5-8 小时前上传的图像时,我不知道为什么我一直遇到 CORS 错误。如果我在5-8 小时内收到它仍然可以!?这是我对 s3 aws 的配置:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>`
这是我尝试获取图像的javascript代码:
function getData(link){
var image = new Image();
// image.crossOrigin = 'use-credentials';
image.crossOrigin = 'anonymous';
// create an empty canvas element
var canvas = document.createElement("canvas"),
canvasContext = canvas.getContext("2d");
image.onload = function () {
//Set canvas size is same as the picture
canvas.width = image.width;
canvas.height = image.height;
// draw image into canvas element
canvasContext.drawImage(image, 0, 0, image.width, image.height);
// get canvas contents as a data URL (returns png format by default)
var dataURL = canvas.toDataURL();
document.getElementById("test").innerHTML = dataURL;
};
image.src = link;
}
getData("https://whammybar.s3.ap-southeast-1.amazonaws.com/duy-gmail-com/productImage/20181001/11bba32c-b276-47f4-b1fa-e87b53136bcc.jpg")
<span id="test"></span>
解决方案
问题不在于 S3 存储桶配置,而在于您如何渲染图像。
如果您打开您的图片链接,您可以清楚地看到它是可访问的。
您做错的是尝试在span
元素中渲染图像,这就是为什么在您的示例中它将图像数据显示为 base64 字符串的原因。
只需将您span
的元素更改为一个img
元素,然后img.src
将dataUrl
function getData(link){
var image = new Image();
// image.crossOrigin = 'use-credentials';
image.crossOrigin = 'anonymous';
// create an empty canvas element
var canvas = document.createElement("canvas"),
canvasContext = canvas.getContext("2d");
image.onload = function () {
//Set canvas size is same as the picture
canvas.width = image.width;
canvas.height = image.height;
// draw image into canvas element
canvasContext.drawImage(image, 0, 0, image.width, image.height);
// get canvas contents as a data URL (returns png format by default)
var dataURL = canvas.toDataURL();
document.getElementById("test").src = dataURL;
};
image.src = link;
}
getData("https://whammybar.s3.ap-southeast-1.amazonaws.com/duy-gmail-com/productImage/20181001/11bba32c-b276-47f4-b1fa-e87b53136bcc.jpg")
<img id="test">