I'm using konvajs and vue-konva to position an image on a rectangle area. I need to cache this image in order to apply a custom filter on it.
This image is uploaded by the user and its dimensions can be quite large (from the device camera in example) and the device can be a smartphone with limited resources.
With small images, everything works fine but when the user choose a big image on a mobile (2500x2500 in example), the image is rendered first and disappears when cache() method is called on the image node.
It seems to depend on the device: everything is fine on my laptop but not on my smartphone (both high-end devices), both with an up to date version of Google Chrome. I've managed to reproduce the issue on my laptop with an even bigger image (~6000x6000).
I don't really know if it is related to Konva or if I reach browser limitations with large files (which could explain it depends on the device). If so, any advice/workaround would be much appreciated.
Last but not least, I need to make an export of the canvas in order to print it later (300dpi resolution, the final image witdth has to be around 2300px) so I can't reduce too much the image size.
You can reproduce with this link.
That goes from browser limitations. Sometimes they may fail to draw too large images. Also in HDPI devices (almost all modern screens) Konva is trying to improve cache quality by increasing the cache size. That makes sense for any vector shapes (like rectangles, circle, etc). But for an image, it doesn't' help much.
So you can reduce cached image size with this:
image.cache({ pixelRatio: 1})
With pixelRatio = 1 the size of the cached canvas will be exactly the same as image size. You may try to reduce it even more. Like pixelRatio = 0.5. If you have a large image and it is scaled to smaller size, the user may not see the difference in quality reducing.