Can't use images from localhost in Canvas export

I’m currently building a photo app. To add some overlay, I’m using a CANVAS I’m drawing multiple layers of images:

  • the taken photo
  • some bundled image
  • potentially additional images

The issue happens when I try to export the drawn canvas. I either get this error message:

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

If I set the crossOrigin="anonymous" attribute to the elements, which allegedly resolves my tainted canvas issue, I’ll get this error message:

Access to image at 'http://localhost/_app_file_/data/user/0/my.app.identifier/cache/cpcp_capture_cba1ea01.jpg' from origin 'http://localhost:8101' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried to update the config.xml with a network_security_config - but that did not help.