Search code examples
konvajsreact-konva

KonvaJS scale down image without losing quality

I am building a Cordova app with image manipulation using Konva (react-konva to be precise). The idea is that when I take a picture with a camera - I can add some markers to it using this library. But as I don't have much space - I need a relatively small stage (e.g. 300x500) to edit large images (e.g. 2000x3000). After manipulations are complete - I have to save that stage to a file.

Currently as I save stage into a file - the image gets shrunk to fit the scale and that small image is the saved result which makes the image unusable.

How can I scale the images down to fit the stage canvas without losing the image quality?

Solution

  • You can set the pixel ratio before you export:

    stage.toDataURL({ pixelRatio: 2 });

    https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html