When you are trying to export a canvas you may have an error like:
Unable to get data URL. Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Or when you apply filters you can have this error:
Unable to apply filter. Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.
Unable to apply filter. The operation is insecure.
That is a CORS error. For security reasons, a browser can mark a canvas as tainted when you load images from another domain. In that case the browser blocks canvas exporting into
imageData (that is what we are doing on export or when filters are used).
First you may try to set
crossOrigin = Anonymous attribute of the loading image. This approach will work only if requested domain has an
Access-Control-Allow-Origin headers that allow shared requests.
But it may not work for all cases. If it doesn’t work, then you have to find a way to store images somewhere else. Like your own domain or a hosting that allows CORS requests.