Question

我正在使用htm2canvas将特定div与图像转换为canvas。当图像是本地图像时，这是有效的。我收到了这个问题

“来自https://mybucket.s3.amazonaws.com/B008C4GFP0.jpg'的来自”http://mywebsite.com“的图像访问已被CORS策略阻止：请求的资源上没有”Access-Control-Allow-Origin“标头。因此，“http://mywebsite.com”不允许访问。“

当图像来自亚马逊时。

Div我正在转向画布

<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
            });

`

要修复此跨源问题，我在亚马逊s3的CORS配置中尝试了此代码

`<?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>
`

请帮我修复亚马逊s3图像的这个交叉原点问题。

Answer 1

我遇到了与Amazon S3相同的问题。我将Amazon S3中的AllowedHeader CORS配置从<AllowedHeader>Authorization</AllowedHeader>更改为<AllowedHeader>*</AllowedHeader>，这对我有用，如下所示。我在这个jsfiddle中尝试过它：http://jsfiddle.net/6FZkk/1066/

希望它适合你。

Answer 2

请勿使用allowTaint或useCORS选项。

在“使用和测试”下查看自述文件：

https://github.com/zeusstl/html2canvas-proxy-nodejs

在将div中的亚马逊s3图像转换为画布时发生交叉原点问题

2 个答案: