Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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.
                Thank you for pointing me this out. This doesn't solve everything but it helped me to better understand the issue! I'll try to scale down images a little bit before using them.
– bgondy
                Jul 23, 2020 at 15:23
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.