canvas.toDataURL() Security Error The operation is insecure

by

Sounds like a CORS issue.

The Video is on a different origin than the web server.

If you can get the video to include an “Access-Control-Allow-Origin: *” header in the response, and you can set video.crossorigin = “Anonymous”, then you can probably pull this off.

I used Charles Web Proxy to add the header to any image or video I wanted to work with.

See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

See Also https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

Here’s a Fiddle working with an Image: http://jsfiddle.net/mcepc44p/2/

var canvas = document.getElementById("canvas").getContext("2d");

var button = document.getElementById("button");

var image = new Image();
image.crossOrigin = "anonymous";  // This enables CORS
image.onload = function (event) {
    try {
        canvas.drawImage(image, 0, 0, 200, 200);
        button.download = "cat.png";
        button.href = canvas.canvas.toDataURL();        
    } catch (e) {
        alert(e);
    }
};
image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

Is this what you’re looking for?

More Related Contents:

  1. JavaScript: Extract video frames reliably
  2. Capture frames from video with HTML5 and JavaScript
  3. How to determine the intended frame-rate on an html video element
  4. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  5. Capture HTML Canvas as gif/jpg/png/pdf?
  6. Resizing an image in an HTML5 canvas
  7. Get pixel color from canvas, on mousemove
  8. Why does canvas.toDataURL() throw a security exception?
  9. Zoom Canvas to Mouse Cursor
  10. Zoom in on a point (using scale and translate)
  11. how to save canvas as png image?
  12. Does HTML5/Canvas Support Double Buffering?
  13. Cross-origin data in HTML5 canvas
  14. HTML 5 video or audio playlist
  15. html 5 canvas LineTo() line color issues
  16. HTML5 Canvas camera/viewport – how to actually do it?
  17. How to resize html canvas element?
  18. How do I rotate a single object on an html 5 canvas?
  19. How to mute an html5 video player using jQuery
  20. Detect if user clicks inside a circle
  21. addEventListener for keydown on Canvas
  22. How to change the playing speed of videos in HTML5?
  23. HTML5 callbacks?
  24. How to save canvas animation as gif or webm?
  25. clearing circular regions from HTML5 Canvas
  26. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  27. Snap edges of objects to each other and prevent overlap
  28. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  29. HTML5 Video: Streaming Video with Blob URLs
  30. JavaScript runtime error: ‘$’ is undefined

Leave a Comment