0

I want to copy the Frames from an Movie into an Canvas and transform that data. There is no Webserver and no data from an foreign host, only local data is used. I use Chrome.

My problem is that, when I call getImageData(...) I get "Uncaught SecurityError: Failed to execute getImageData on CanvasRenderingContext: The canvas has been tainted by cross-origin data."

So, I have found a few Pages with the same error. There they said to change the Filepath or crossOrigin. So, i setted the video to crossOrigin = "anonymous" the same for the Canvas context and the video Element - nothing worked.

Code Snippet:

   video = $("#video")[0];
   canvas = $("#mycanvas");
   canvas2 = $("#mycanvas2");
   ctx=canvas.getContext("2d");ctx2=canvas2.getContext("2d");
   ctx2.drawImage(video,0,0); 
   data=ctx2.getImageData(0,0,w,h) //not working...
   ctx.putImageData(data,0,0)

Is there aything I can do, or how do I use the crossOrigin properly here? One of my collegues mentioned that there is an flag, if I start with that Chrome the Error doesn´t appear, but he can´t rememeber which one and I can´t find it...

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
EsoMoa
  • 687
  • 1
  • 8
  • 19
  • Try `--disable-web-security` – Musa Jul 13 '15 at 21:47
  • "There is no webserver" - that is your problem, [see this discussion here](http://stackoverflow.com/questions/12587731/same-origin-policy-google-chrome-canvas-and-file-scheme) – doldt Jul 13 '15 at 21:47
  • One of the first results in google: http://stackoverflow.com/questions/9972049/cross-origin-data-in-html5-canvas – Andreas Jul 13 '15 at 21:47
  • Yeah as I already have written I have already tried to use crossorigin, but it´s not working. @Musa Thanks, thats it! The --allow-file-access-from-files I have often found is not working, but this is. – EsoMoa Jul 14 '15 at 14:01

0 Answers0