0

I'm currently building a feature where a user can upload a video, then select a thumbnail. It's based off this fiddle:

http://jsfiddle.net/e98tffu6/556/

The code to save the canvas data - starting with toDataUrl() - works under normal circumstances. Already tested it. I can get image data and post it to my action page via AJAX.

But I'm getting a classic error about the Canvas being tainted. Something like this:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.

That's because my video is coming from a different domain. I use a CDN.

I'm on http://example.com and loading a video from http://videos.example.com - so the code doesn't work in this specific instance.

I know that somehow using javascript, I have to set a property called crossOrigin = "Anonymous" on my source material, whether it's the video itself or the canvas. There are a million variations of this question on SO. I've looked at them all, and I still can't figure out what I'm doing.

Can anybody put together an example where toDataUrl() works in this situation?

Thanks in advance.

TRose
  • 1,718
  • 1
  • 16
  • 32
  • 1
    `crossOrigin = 'anonymous'` (note the lowercase `a`) only works if the server hosting the video file supports CORS – Patrick Roberts Jul 22 '17 at 05:23
  • @PatrickRoberts, you're completely right, but just a note : if the `crossorigin` attribute is set to any other value than `"use-credentials"`, it will default to `"anonymous"` so `"Anonymous"` would work exactly the same as if it had been `"anonymous"` or `"foo"` (or even `"false"`...). The problem is not there but clearly from the server config. – Kaiido Jul 22 '17 at 05:39
  • If the user "*uploads*" the video, why do you use the one you host on your cdn ? Don't you have it in memory ? This way no cross-origin issue, and your user doesn't have to download again something he has on his computer... For the configuration of your cdn, read their manual, it's certainly explained how to configure cross-origin requests, but it depends on each service. – Kaiido Jul 22 '17 at 05:44
  • @Kaiido I appreciate the tip, I'm just following [what's documented on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) – Patrick Roberts Jul 22 '17 at 05:45
  • @PatrickRoberts, yep just highliting the last sentence of the first part of this page : *"An invalid keyword and an empty string will be handled as the `anonymous` keyword."*. Some may expect that `"false"` or `""` would set it to no CORS, but it's not the case. – Kaiido Jul 22 '17 at 05:47
  • @Kaiido the video is uploaded directly to an S3 Bucket. THEN the user may add a title, tags, thumbnail, and hit publish. This is not relevant however, and I'm only looking for a way to save a thumbnail as outlined above. I'll double check the S3 stuff because I know it has CORS settings. – TRose Jul 22 '17 at 05:50
  • @Kaiido and company, thanks for the hints. My S3 bucket was configured correctly, but the results were not consistent across browsers. Turns out I had an error in the header of my page. I use ColdFusion and I had to set `` – TRose Jul 22 '17 at 06:14

0 Answers0