Search code examples
html5-canvasgoogle-cloud-storagekonvajs

KonvaJS toDataURL scene export to image not working with google cloud images


I have Konva scene with images which url is pointing to google could bucket. Images are public and can be simply opened from browser by url. When trying to export scene using

scene.toDataURL()

I get CORS error.

According to solution from Konva docs I tried to set crossOrigin of image element to Anonymous, but it does not help, I get error:

CORS header ‘Access-Control-Allow-Origin’ missing

I am thinking of preloading images from bucket before page render and pasting its data with context, but hope there is more simple solution, thanks in advance.


Solution

  • For more details, you can read this: https://konvajs.org/docs/posts/Tainted_Canvas.html

    In your case, you need to configure Google cloud images, so your domain is configured in CORS settings (or all domains are allowed).

    I think google cloud docs is the best place to find the solution.

    https://cloud.google.com/storage/docs/using-cors

    https://cloud.google.com/storage/docs/cross-origin