Saving an image from a canvas using toDataUrl() - tainted canvas error workaround? [duplicate]

问题

This question already has answers here:

What do I set CORS settings to and where so that my canvas doesn't get tainted? (1 answer)

Canvas image crossplatform insecure error (1 answer)

Closed 2 years ago.

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.

来源：https://stackoverflow.com/questions/45250974/saving-an-image-from-a-canvas-using-todataurl-tainted-canvas-error-workaroun