如何摆脱受污染的帆布混乱?

Question

好的，所以我有一个代码点火器应用程序。现在在第 1 页上，我有一个 ajax，它从第 2 页获取充满谷歌云 cdn 图像的 html 内容，然后将内容附加到div。我正在使用 html2canvas 将该div 内容获取到第 1 页上的画布上。现在很明显，在这一点上，第 1 页上的画布被污染了。我的问题是如何toDataUrl工作！需要画布的快照。

这是我到目前为止尝试过的：

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

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

2. 尝试在两个控制器构造函数上添加跨源标头，这些构造函数在下面双向为 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: *');

PS：不要给出在本地存储中下载图像并在第 2 页上使用它们的解决方案，因为我使用的是 Google App Engine 标准，我只能在存储桶上写入/存储文件！

Answer 1

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

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

PS：我所有的图像都是png类型