如何使用html2Canvas和AWS S3图像处理CORS？

Question

我知道以前曾问过类似的问题，但我仍然无法解决。我有一个div带有图像的图像，这些图像是从AWS s3的存储桶中加载的，它们加载完全没有问题。

现在，我希望能够将该特定文件中的任何内容另存为jpeg div（例如截屏），该插件html2canvas对此提供了帮助。问题是当我尝试实际保存它（或只是立即显示此类屏幕截图的结果）时，我遇到了以下问题：

• 画布被污染=>我allowTaint: true在插件中设置了它，但它会抛出此错误，因此我禁用了它，该错误消失了。我一直useCORS设置为true允许其他来源的图像。

• 图片访问权限已被CORS政策禁止

为了解决这个问题，我在AWS S3存储桶上设置了CORS，但这似乎不起作用（或部分起作用）。我注意到，当插件使用它们生成jpeg时，这些图像的响应标头没有CORS元数据。然后，我尝试crossOrigin="anonymous"在内设置这些图像，div但它会立即引发CORS错误，由于为此设置了AWS存储桶，因此不会发生CORS错误：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

关于如何使这项工作，我没有更多选择。任何关于如何从这里开始的想法将不胜感激。

编辑：更多详细信息，我正在使用React，并且从服务器检索图像URL。这意味着，一旦获得此网址数组，我就会生成：

<div>
  { urls.map(url => <img src={url} alt="some alt" />) }
</div>

如果添加crossOrigin="anonymous"，则会收到CORS错误。如果我不进行说明，则会显示图像，但是html2canvas当尝试生成“屏幕截图”时，插件也会引发CORS错误。

有关HTTP请求的更多详细信息。因此，我第一次在中加载图片时div，这是响应标头：

Accept-Ranges:bytes
Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:*
Cache-Control:max-age=2592000
Content-Length:508208
Content-Type:image/png
Date:Thu, 16 Feb 2017 18:25:05 GMT
Last-Modified:Wed, 15 Feb 2017 19:09:44 GMT
Server:AmazonS3
Vary:Origin, Access-Control-Request-Headers, Access-Control-Request-Method 

现在，如果crossOrigin='anonymous'图片不是来自缓存，这将起作用。如果crossOrigin未设置该属性，则会得到：

Accept-Ranges:bytes
Cache-Control:max-age=2592000
Content-Length:508208
Content-Type:image/png
Date:Thu, 16 Feb 2017 19:03:53 GMT
Last-Modified:Wed, 15 Feb 2017 19:09:44 GMT
Server:AmazonS3

否则会在控制台上引发CORS错误，而不会在响应标头上显示任何元数据。我尝试在url（?somethingsomething）的末尾添加一个随机字符串，以使它们永远不会从缓存中获取，从而完全解决了该问题。但这只是一个hack，目前可以使用，但它绝对不是我正在寻找的解决方案。我认为Chrome正在对缓存做一些事情，除了很难在我的机器上重现此问题之外，我很难跟踪问题的根源，因为即使我完全使用它也总是从缓存中检索屏幕截图新图像并禁用/清除缓存。这非常令人困惑。

Answer 1

看到编辑，我确实尝试设置crossOrigin属性，但是没有运气，并且我将useCORS设置为true（忘了说抱歉）。仍然没有运气。

我修复了谷歌浏览器，AWS S3和多个起源的结合所带来的一些问题。

我发现了这个stackoverflow线程： Chrome + CORS +缓存-从两个不同的来源请求相同的文件

指向该错误报告的链接：https : //bugs.chromium.org/p/chromium/issues/detail?id=260239

无论如何，作为解决方法，您可以尝试以下修改版的html2canvas：https ://gist.github.com/CrandellWS/6bc2078aced496004d7a045e6360f19b

使用选项：

allowTaint : false,
useCORS: true

希望能有所帮助。

仅供参考，这会将当前时间戳添加到cors图像网址，从而避免了我在Chrome上遇到的缓存问题... https://gist.github.com/CrandellWS/6bc2078aced496004d7a045e6360f19b#file-html2canvas-js-L6838

这意味着它将通过重新下载这些图像来影响性能...

原始帖子：https : //github.com/niklasvh/html2canvas/issues/1544#issuecomment-435640901

Answer 2

我通过在 html2canvas 中添加proxy:( image src )选项解决了这个问题。现在您的图像也包含在 pdf 中

打字稿代码：

download() {
        var data = document.getElementById('view-eob');
        html2canvas(data, { proxy: this.eobDetail.member.parentCompany.logo })
        .then(canvas => {
            var imgWidth = 208;
            var imgHeight = canvas.height * imgWidth / canvas.width;
            const contentDataURL = canvas.toDataURL('image/png')
            let pdf = new jsPDF('p', 'mm', 'a4');
            var position = 0;
            pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
            pdf.save(`${this.eobDetail.episode.name}-EOB.pdf`);
        });
    }

HTML 代码：

<div>
     <img [src]="this.eobDetail.member.parentCompany.logo"/>
</div>
<button type="button" (click)="download()"> Download</button>