我知道以前曾提出类似的问题,但我仍然无法使其发挥作用.我有一个div,里面的图像是从AWS s3中的一个桶中加载的,它们加载完全没问题.
现在我希望能够保存为特定div中的jpeg(如截图),插件html2canvas有助于此.问题是,当我尝试实际保存它(或者只是立即显示这种屏幕截图的结果)时,我遇到了以下问题：
>画布被污染=>我在插件中设置allowTaint：true但它会抛出此错误,所以我禁用它并且错误消失了.我将useCORS设置为true,但允许来自其他来源的图像.
> CORS策略阻止了对图像的访问
为了解决这个问题,我在我的AWS S3存储桶上设置了CORS,但这似乎不起作用(或者它部分工作).我注意到,当插件使用它们生成jpeg时,这些图像的响应头没有CORS元数据.然后我尝试在div中的那些图像中设置crossOrigin =“anonymous”,但它会立即抛出一个CORS错误,这不应该发生,因为AWS存储桶的设置如下：
我没有关于如何使这项工作的选项.如何从这里开始的任何想法将非常感激.
编辑：更多细节,我使用React并从服务器检索图像网址.这意味着,一旦我得到这个网址数组,我就会生成：
如果我添加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),以便永远不会从缓存中抓取它们,这完全解决了问题.但这只是一个黑客,它现在可以工作,但它绝对不是我想要的解决方案.我认为Chrome正在对缓存做一些事情,我很难跟踪问题的根源,除了在我的机器上很难重现这个问题的事实,因为它总是从缓存中检索截图,即使我完全使用新图像和禁用/清除缓存.这很令人困惑.
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和多个来源的组合解决了我遇到的一些问题.
我找到了这个stackoverflow线程：
Chrome + CORS + cache – requesting same file from two different origins
哪个链接到此错误报告：
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
