Get img from canvas (toDataURL) --> Tainted canvases may not be exported

Question

I have following error message:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at draw (http://motherlang-bananalang.com/videator-b.php:172:50)
at HTMLVideoElement.<anonymous> (http://)
at HTMLVideoElement.dispatch (http:/)
at HTMLVideoElement.r.handle (http:/)

HTML:

<input type='hidden' class='input_img' name='imgBase64'/>
<?php
   $contents = $s3->getBucket("motherla-temp");          
   $furl = "http://motherla- temp.s3.amazonaws.com/".$_SESSION['file_name'];
   echo '<video id="v" width="100%" height="auto" controls><source src="'.$furl.'" type="video/mp4"> </video>';     
 ?>     
 <p style=' '> Thumbnail: Pause video and choose a thumbnail! </p>
 <canvas id='c' style=';border:1px solid silver;'></canvas>

JQUERY:

 $('#v').on('pause', function(){ 
    var video = document.getElementById('v');
    var w = $(this).width();
    var h = $(this).height();  
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');  
    canvas.width = w;
    canvas.height = h; 
    draw(this,context,w,h);  
  }) 

function draw(v,c,w,h) {    
  c.crossOrigin = "Anonymous";
  c.drawImage(v,0,0,w,h);
  //setTimeout(draw,20,v,c,w,h);
  var dataURL = document.getElementById('c').toDataURL(); 
  $('.input_img').val(dataURL);   
}

Now, what this code does is on video pause it grabs the video caption and draws it onto the canvas then it gets the dataURL from the canvas to transform it into img and save later on in the database and to the server. Basically, I'm making a custom video thumbnail script.

The question is: how to get rid of the error and get the canvas NOT tainted. (when I was working on locahost - everything was fine, but now my website is online and here is the problem) I've searched the issue and none of the possible solution helped me (maybe, because this is my first website and I'm a complete newbie in this(sorry, if someone may ask to give the website link - this is kind of a secret till I finish developing it)). I've read about CORS and if I'd make the page at the root of the server it will all go but I actually want the page to STAY located at where it is - at the public_html/ folder. So, I'm guessing (though i'm really clueless here at this point, as I did a research on the topic and it did not help me out) I should either use this line of code somewhere:

crossorigin="Anonymous"

or I should ask my hosting server support team to change some settings in server for my website so that it would work even if the page is not located at the root of server.

If I should use that line of code - please, help me out where, because I know it has something to do with img tag but I have no img tag at all!

And if I can ask my hosting provider (the support team of it) to "change something on the server so the error would go away" (lol, sounds as goofy as it is) then please point me out what exactely should i ask the support team to change (what settings).

I know I should add this:

<img src="otherdomain.com" crossorigin="Anonymous" />

  <!-- Or with Javascript -->
  <script>
   var image = new Image();
   image.crossOrigin = "Anonymous";
    ...
 </script>

somewhere in my code but I dont know where, as I don't have any img tag. I'd apreciate if you guys would modify my code so the error would vanish or just point me out the possible ways of solving the issue.

Again, I'm real newbie to the programming in general, so any advices and help would be really apreciated!

Thank you in advance. Peace, guys.

Answer 1

To others who have not been able to solve the problem here is a sample xml code that should allow CORS from your s3 bucket.

<!-- Sample policy -->
<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>