[英]s3-amazon image CORS issue (Only happened in few browser after 5-8 hours)
目前,我不知道為什么當我嘗試從 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">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.