如何摆脱被污染的 canvas 混乱局面？

Question

好的，我有一个 codeigniter 应用程序。现在在第 1 页上，我有一个 ajax，它从第 2 页获取 html 充满 google 云 cdn 图像的内容，然后将内容附加到 div。我正在使用 html2canvas 将 div 内容添加到第 1 页上的 canvas。现在很明显，第 1 页上的 canvas 已被污染。我的问题是如何让 toDataUrl 工作！需要 canvas.

的快照

这是我目前尝试过的方法：

像这样用 html2canvas 添加了代理（php n js）..它帮助我摆脱了 html2canvas 的问题。 =38=]2canvas 无法从 cdn-

加载图像

html2canvas(div_content,{
            proxy: "proxy.js",
            useCORS: true,allowTaint: true}).then(function(canvas) { 
                                              var img=canvas.toDataurl(); 
                                                  });

尝试在下面两种方式为 page1 和 page2 提供服务的两个控制器构造函数上添加 cross-origin headers，但没有成功。

我。 header("Access-Control-Allow-Methods: GET, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");

二． $this->output->set_header('Access-Control-Allow-Origin: *');

P.S : 不要给出在本地存储中下载图像的解决方案并在 page2 上使用它们，因为我正在使用 Google App Engine 标准并且我只能 write/store存储桶中的文件！

Answer 1

由于时间不够，我不得不实施一个非常明显的快速解决方案。由于我没有在使用 js 加载后将所有图像元素的 cross-origin 设置为 anonymous 的奢侈，而不是使用来自 cdn 的图像，我将它们全部转换为 base64编码数据url。如果有人可以为该问题提供经过测试的解决方案，请稍后再做。但如果有人赶时间，那么这是一个快速的解决方案。

<img src="<?php echo 'data:image/png;base64,'.base64_encode(file_get_contents(<cdn-img-link>));?>">

P.S : 我所有的图片都是png类型

如何摆脱被污染的 canvas 混乱局面？

How to get out of tainted canvas mess?

google-app-engine

codeigniter

canvas

cross-domain

html2canvas