How to download / export a rendered smiles as an image

[MurhafSousli]

I want to implement a download button next to the smiles, I use SVG to render the smiles. but I am wondering if I can be able to download an image format like PNG of the smiles

drawImage() {
  const drawer = new SmilesDrawer.SvgDrawer();

  SmilesDrawer.parse(
     this.smiles,
     (tree: any) => {
        drawer.draw(tree, this.svgElement.nativeElement, 'light');
      },
      (err: Error) => {
         this.smileFailed = true;
       }
   );
}

Should I use an img element, an inline data or BLOB that can be used to make the download?

[Acylation]

https://github.com/Acylation/obsidian-chem/blob/599af5988e79eb308ab702d61b6f4cae7f627534/src/SmilesBlock.ts#L191

The onCopy function can transfer svg dom string (fetched from outerHTML() of SVGSVGElement) to img/png blob object in clipboard. Please ignore the UI code irrelated to this package. Feel free to follow-up if there's something unclear.

Also canvas renderer provides more flexibility. Ref: https://github.com/reymond-group/smilesDrawer/issues/89