feat: improve save as PNG, SVG and copy to clipboard

[hamed-musallam]

Browsers have limits on the maximum size of a canvas, These limits differ by browser, Chrome's maximum canvas size is 16,384 x 16,384 pixels.

Chrome:
Maximum height/width: 32,767 pixels
Maximum area: 268,435,456 pixels ( 16,384 x 16,384)

Firefox:
Maximum height/width: 32,767 pixels
Maximum area: 472,907,776 pixels ( 22,528 x 20,992)

[cloudflare-workers-and-pages]

Deploying nmrium with    Cloudflare Pages

Latest commit:	0d7c476
Status:	✅  Deploy successful!
Preview URL:	https://b6c1ab5c.nmrium.pages.dev
Branch Preview URL:	https://improve-save-as-image.nmrium.pages.dev

View logs

[lpatiny]

Default in 'cm'.

There should be a simple mode in which the user select a size (default to A5) and a resolution (default to 300 DPI). From those values we can calculate the number of HORIZONTAL pixels.

A5 is 8.3 x 5.8 this means 2490 x 1740 px.

If we have for example on the screen 1027 x 853 we need to call the method:

function createObjectURL(blob: Blob, options: CreateObjectURLOptions) {
  const { resolution, width, height } = options;

  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

We need a new SVG with the correct ratio. We don't change the width but we change only the height. New height = 1740 / 2490 * 1027 = 718 px. So we create the SVG with 1027 x 853.

Now we need to calculate the scale factor:

Scale factor: 2490 / 1027 = 2.42

[lpatiny]

Save in cm and reload is a mess

Do not display decimals for px and it should be written @300 and not @cm dpi

[lpatiny]

The functionality looks ok to me but for now just hide the toggle Basic / Advanced. We will keep only Basic and wait if somebody really needs the advanced mode.

[lpatiny]

Could you still add shortcuts so that 'ENTER' validates the dialog and 'ESC' cancel it ?