Why Can't I Export My Canvas as an Image? (Tainted Canvases Error)

Resolving "Tainted Canvases May Not Be Exported" Error

When attempting to save a canvas to an image using canvas.toDataURL(), you may encounter the following error:

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

Cause:

For security reasons, the local hard drive is considered "other-domain", which will pollute the canvas.

Solution:

During testing, you can try the following solutions:

• Place all page related files in On desktop: Place all HTML, JPG, JS, CSS, etc. files on the desktop, not in subfolders.
• Publish the image to a site that supports cross-domain sharing: such as DropBox.com or GitHub. Make sure to place the image in a public folder in DropBox and set the cross-origin flag (var img=new Image(); img.crossOrigin="anonymous" ...) when downloading the image.
• Install a web server on your development machine: For example IIS and PHP web servers both have free versions that run well on your local machine.

The above is the detailed content of Why Can't I Export My Canvas as an Image? (Tainted Canvases Error). For more information, please follow other related articles on the PHP Chinese website!