1

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?

Kristis
  • 389
  • 3
  • 16
  • 1
    You may prefer to save the image and markers separately. That way you can store the image at its best resolution once and store the marker metadata in a database - example might be user id, dat & time, rectangle position on canvas, notes. – Vanquished Wombat Jan 27 '20 at 19:18

1 Answers1

3

You can set the pixel ratio before you export:

stage.toDataURL({ pixelRatio: 2 });

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

Dominik
  • 406
  • 2
  • 12