How to get out of tainted canvas mess?

Question

Ok so I have an codeigniter application. Now on page1 I have an ajax that gets a html content full of google cloud cdn images from page2 & then appends the content to a div. I am using html2canvas to get that div content to a canvas on page1. Now clearly at this point the canvas on page1 is tainted. My question is how to get toDataUrl working! Need a snap of the canvas.

Here's what I have tried so far:

1. Have added a proxy (both php n js) with html2canvas like this.. it helped me get out of the issue of html2canvas not being able to load images from cdn-

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

2. tried adding cross-origin headers on both controller constructors that serves page1 & page2 both ways below but din't work.

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

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

P.S : Do not give a solution of downloading the images in the local storage & use them on page2 as I am using Google App Engine standard & I can only write/store files on bucket!

Answer 1

Due to lack of time I had to implement a quick solution that was pretty obvious. Since I didn't have the luxury of having cross-origin set to anonymous for all the image elements after load using js, instead of using images having source from cdn, I converted all of them to base64 encoded data url. If anyone could provide a tested solution for the problem, please do later. But if someone is in a hurry then this is a quick solution.

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

P.S : All of my images were of type png