在将div中的亚马逊s3图像转换为画布时发生交叉原点问题 [英] Cross origin issue occuring while converting amazon s3 images in div to canvas

问题描述

我正在使用

I am using htm2canvas to convert a particular div with images to canvas.This is working when images are local. I am getting this issue

"Access to Image at 'https://mybucket.s3.amazonaws.com/B008C4GFP0.jpg' from origin 'http://mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mywebsite.com' is therefore not allowed access."

when images are from amazon.

Div I am coverting to 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 configuration 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.

解决方案

I was facing same issue for Amazon S3. I changed AllowedHeader CORS configuration in Amazon S3 from <AllowedHeader>Authorization</AllowedHeader> to <AllowedHeader>*</AllowedHeader> and that worked for me as shown below. I tried it in this jsfiddle: http://jsfiddle.net/6FZkk/1066/

Hope it works for you.

这篇关于在将div中的亚马逊s3图像转换为画布时发生交叉原点问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！