Cross origin issue when converting amazon s3 images to div to canvas
I am using htm2canvas to convert a specific div with images to canvas. This works when the images are local. I am getting this problem
"Image access at ' https://mybucket.s3.amazonaws.com/B008C4GFP0.jpg ' from origin ' http://mywebsite.com " is blocked by CORS policy: header "Access-Control-Allow-Origin" is present on the requested resource. Origin ' http://mywebsite.com ' so no access allowed. "
when the images are on amazon.
Div I cover the canvas
<div>
<img id="img1" src="https://mybucket.s3.amazonaws.com/B008C4GFP0.jpg" style="width:100%; height:100%;position:relative;">
<img id="img2" src="https://mybucket.s3.amazonaws.com/B00HXT858A.jpg" style="width:100%; height:100%;position:relative;">
</div>
My html to canvas code is
`
html2canvas(element, {
useCORS: true,
allowTaint:true,
onrendered: function (canvas) {
getCanvas = canvas;
var content = $("#TempPublishedItems").html();
var image = getCanvas.toDataURL("image/jpg");
var image1 = document.createElement("IMG");
image1.src = getCanvas.toDataURL("image/jpg");
},
proxy: 'https://html2canvas.appspot.com/query',
logging: true
});
`
To fix this cross origin issue I tried this code in CORS config in amazon s3
`<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>https://mywebsite.com</AllowedOrigin>
<AllowedMethod>HEAD</AllowedMethod>
</CORSRule>
</CORSConfiguration>
`
Please help me fix this cross origin issue with amazon s3 images.
source to share
I faced the same issue for Amazon S3. I changed CORS config AllowedHeader
in Amazon S3 from <AllowedHeader>Authorization</AllowedHeader>
to <AllowedHeader>*</AllowedHeader>
and it worked for me as shown below. I tried it in this jsfiddle: http://jsfiddle.net/6FZkk/1066/
Hope it works for you.
source to share