1

I am currently loading a rather large image (15000x10000) into a konva canvas. The canvas is draggable in another canvas. The image is not drawn if parts of it leave the view of the browser. The main problem is that the dragging is not smooth when zoomed out of the canvas just a little bit and zooming out of and into the image is quite stuttery.

The image gets loaded from the file system, turned into a Blob, an object url is created like window.URL.createObjectURL(...), passed to an HTMLImageElement and then passed to a Konva.Image.

Is there a way to speed up the drawing perfromance of the image when dragging/zooming or is the only way to make it faster to downsample the original image?

lef
  • 67
  • 4
  • For the image: Turn stroke off; turn shadow off, cache the shape. When you say 'The image is not drawn if parts of it leave the view of the browser.' how do you do that? – Vanquished Wombat Apr 25 '22 at 08:41
  • @VanquishedWombat the way i do it is basically as outlined in the performance tips/stage dragging of the konva documentation. See https://konvajs.org/docs/sandbox/Canvas_Scrolling.html – lef Apr 26 '22 at 09:57

1 Answers1

3

15000x10000 is huge. It is hard for browser to handle that size.

If a user see only part of that image, you should split it into several smaller parts. You can do that dynamically in the real-time using several canvas elements. You can use Konva.Image to display canvas on the layer. You can generate such canvas elements in the realtime.

If a use to see full image, most likely it is scaled down, so you can decrease image size, without loosing visible quality. With Konva you can easily use caching for that. Here how you can make image width and height 2x smaller:

imageShape.cache({ pixelRatio: 0.5 });
lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Is the reason for splitting up the canvas into several smaller chunks the drawing of images in konva internally? i.e. if something is in the field of view every pixel of it gets drawn? – lef Apr 26 '22 at 09:56