While experimenting with the canvas element to save images, I encountered issues specifically in Chrome related to setting the initial image.
<a href="#" data-src="https://s3.amazonaws.com/imphotos/uploads/thumb_IM_17592186048618_17592186048643.jpg">ONE</a>
<a href="#" data-src="https://s3.amazonaws.com/imphotos/uploads/thumb_IM_17592186047657_17592186047769.jpg">TWO</a>
<a href="#" data-src="https://s3.amazonaws.com/imphotos/uploads/thumb_IM_17592186047657_17592186047727.jpg">THREE</a>
var setImg = function(src){
var img = new Image;
img.crossOrigin = "Anonymous";
img.onload = function(){
alert("LOADED!");
}
img.onerror = function(){
alert("ERROR!");
}
img.src = src;
};
$(document).ready(function(){
$("a").click(function(e){
var src = $(e.currentTarget).data('src');
setImg(src);
});
});
Initially, this process works smoothly, but subsequent attempts to load second or third images fail due to CORS settings, despite having the following CORS configuration:
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedHeader>*</AllowedHeader>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
Upon constructing a new image through a click handler, an error message is received:
Image from origin '' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
This issue does not occur initially and seems to be specific to Chrome as it works fine in Firefox.
UPDATE:
Further investigation revealed that the image loading issue was not dependent on the order of execution but rather random.
A JS fiddle was created for better understanding, showing that some pictures in the S3 bucket work while others do not. Do I need to apply CORS settings retroactively to all images in the bucket? Could this be an S3 bug or an issue with my images themselves?
Clicking on "TWO" triggers a loading alert, but only 1 out of 3 images loads successfully, with the others throwing the CORS error.
https://jsfiddle.net/6L44ttus/
Update 2:
Considering the suggestion to switch the bucket name format (e.g., my-bucket.s3 instead of s3.my-bucket), I tested this change but unfortunately, none of the images are loading now.