如何使用html2Canvas和AWS S3图像处理CORS？ [英] How do I handle CORS with html2Canvas and AWS S3 images?

问题描述

我知道之前已经提出了类似的问题，但我仍然无法使其发挥作用。我有一个 div ，里面的图像是从AWS s3中的一个桶加载的，它们加载完全没问题。

I know similar questions have been asked before but I still can't make it work. I have a div with images inside of it loaded from a bucket in AWS s3, they load perfectly no problem.

现在我希望能够将jpeg保存为特定的 div （如截图），插件 html2canvas 有帮助。问题是，当我尝试实际保存它（或者只是立即显示这种屏幕截图的结果）时，我遇到了这些问题：

Now I want to be able to save as a jpeg whatever is in that specific div (like taking a screenshot), the plugin html2canvas helps with that. The problem is that when I try to actually save it (or simply show immediately the result of such screenshot) I run into these issues:

• Canvas被污染=>我在插件中设置了 allowTaint：true 但它会抛出此错误，所以我禁用了它并且错误消失了。我保持 useCORS 设置为 true 虽然允许来自其他来源的图像。

• Canvas is tainted => I set allowTaint: true in the plugin but it would throw this error, so I disabled it and the error went away. I keep useCORS set to true though to allow images from another source.

CORS政策阻止了对图片的访问

Access to image has been blocked by CORS policy

为了解决这个问题我在我的AWS S3存储桶上设置CORS，但这似乎不起作用（或者它部分工作）。我注意到，当插件使用它们生成jpeg时，这些图像的响应头没有CORS元数据。然后我尝试在 div 中的那些图像中设置 crossOrigin =anonymous，但它会抛出一个CORS错误离开，这应该不会发生，因为AWS桶已经设置如下：

In order to solve this I set up CORS on my AWS S3 bucket, but that didn't seem to work (or it worked partially). I noticed that the response header of those images don't have CORS metadata when the plugin uses them to generate the jpeg. I then tried to set crossOrigin="anonymous" in those images inside the div but it would throw a CORS error right away, which shouldn't happen since the AWS bucket has been set up for that as follows:

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

我没有关于如何使这项工作的选项。关于如何从这里开始的任何想法将非常感激。

I am running out of options on how to make this work. Any idea on how to proceed from here would be very appreciated.

编辑：更多细节，我使用React并从服务器检索图像网址。这意味着，一旦我得到这个网址数组，我就会生成：

More details, I am using React and the images urls are retrieved from a server. This means that as soon as I get this array of urls I generate:

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

如果我添加 crossOrigin =anonymous我收到CORS错误。如果我将其删除，图像会显示，但是当尝试生成屏幕截图时， html2canvas 插件也会引发CORS错误。

If I add the crossOrigin="anonymous" I get the CORS error. If I leave that out, the images display but then the html2canvas plugin throws a CORS error as well when trying to generate the "screenshot".

有关HTTP请求的更多详细信息。所以我第一次在 div 中加载图像时，这就是响应标题：

More details about the HTTP requests. So the first time I load an image inside the div, this is the Response Header:

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 属性，我会得到：

Now this works if crossOrigin='anonymous' and the picture is not from the cache. If the crossOrigin attribute is not set I get:

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 ），以便永远不会从缓存中抓取它们，这完全解决了问题。但这只是一个黑客，它现在可以工作，但它绝对不是我想要的解决方案。我认为Chrome正在对缓存做一些事情，我很难跟踪问题的根源，除了在我的机器上很难重现这个问题的事实，因为它总是从缓存中检索截图，即使我完全使用新图像和禁用/清除缓存。这非常令人困惑。

or it throws a CORS error on the console without showing any meta data on the response header. I tried adding a random string at the end of the url (?somethingsomething) so that they would never be grabbed from the cache, and that fixed the issue completely. But this is just a hack and it works for now but it is not definitely the solution I am looking for. I think Chrome is doing something with the cache and I have a hard time tracking the source of the issue, other than the fact that it's hard to reproduce this problem on my machine since it always retrieved the screenshot from cache even if I am using completely new images and disable/clear cache. It's very confusing.

推荐答案

看到编辑，我尝试设置crossOrigin属性，没有
运气，我用useCORS设置为true（忘了提那个抱歉）。
仍然没有运气。

See the edit, I did try setting the crossOrigin attribute with no luck, and I use useCORS set to true (forgot to mention that sorry). Still no luck.

我修复了我使用Google Chrome，AWS S3和多个来源。

I fixed some cors issues I was having with the combination of Google Chrome, AWS S3, and multiple origins.

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

I found this stackoverflow thread: Chrome + CORS + cache - requesting same file from two different origins

哪些链接对此错误报告：
https://bugs.chromium .org / p / chromium / issues / detail？id = 260239

Which links to this bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=260239

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

Anyhow as workaround solution you can try this modified version of html2canvas: https://gist.github.com/CrandellWS/6bc2078aced496004d7a045e6360f19b

使用选项：

allowTaint : false,
useCORS: true

希望有所帮助。

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

FYI, this will add the current time stamp to cors image urls to sidestep a cache issue I was having on Chrome... https://gist.github.com/CrandellWS/6bc2078aced496004d7a045e6360f19b#file-html2canvas-js-L6838

这意味着它会通过重新下载这些图片来影响效果......

Which means it will effect performance by re-downloading those images...

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

这篇关于如何使用html2Canvas和AWS S3图像处理CORS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！