如何摆脱被污染的帆布烂摊子？答案

【问题标题】：How to get out of tainted canvas mess?如何摆脱被污染的帆布烂摊子？
【发布时间】：2018-09-05 04:41:36
【问题描述】：

好的，我有一个 codeigniter 应用程序。现在在 page1 我有一个 ajax，它从 page2 获取一个充满谷歌云 cdn 图像的 html 内容，然后将内容附加到一个 div。我正在使用 html2canvas 将该 div 内容获取到 page1 上的画布上。现在很明显，page1 上的画布已被污染。我的问题是如何让toDataUrl 工作！需要画布。

这是我迄今为止尝试过的：

像这样用html2canvas添加了一个代理（都是php n js）。它帮助我摆脱了html2canvas无法从cdn加载图像的问题-

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

尝试在两个控制器构造函数上添加跨域标头，这些构造函数在下面两种方式为 page1 和 page2 提供服务，但不起作用。

我。 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 标准并且我只能在存储桶上写入/存储文件！

【问题讨论】：

标签： codeigniter google-app-engine canvas cross-domain html2canvas

【解决方案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 类型的

【讨论】：