How to avoid tainted canvas?

Question

I try to save an Canvas as an Image. But it fails always. I was looking up the Internet and Stackoverflow.com but I couldn't find the right answer. I use the answer in this question to get the context. This works fine, but if I use context.toDataURL I receive error the Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

I do not understand why I get this until now, because I added to my canvas and to the videostream the attribute crossorigin="anonymous" and if I check the attribute in the javascript section I still receive that crossorigin is anonymous. Therefore it should work.

function captureimage(){
var canvas = document.getElementById("c");
var video = document.getElementById("v");
var ctx;
if(video.paused) {
    try {
         ctx = canvas.getContext('2d').drawImage(video, 0, 0);
     } catch (e) {
          alert(e);
     }
     var a = ctx.toDataURL();
}   
}

How can I solve this security issue? I also added Header set Access-Control-Allow-Origin * to my httpd.conf, but this didn't solve the problem either.

Answer 1

我遇到了同样的问题，可以通过在视频代码中添加crossorigin =“ *”来解决

Answer 2

I had this problem when i was trying to draw an image that Chrome had cached into a canvas. I solved my issue by adding a unique cache breaking parameter to the image URL, to ensure that the image was never being cached.