uses canvas2html for downloading images

webapp/packages/core-utils/package.json

@@ -46,6 +46,7 @@
     "@types/underscore": "^1",
     "@types/uuid": "^10",
     "@types/whatwg-mimetype": "^3",
+    "html2canvas": "^1",
     "rimraf": "^6",
     "typescript": "^5",
     "vitest": "^3",

webapp/packages/core-utils/src/downloadCanvasAsPng.ts

@@ -0,0 +1,17 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { download } from './download.js';
+
+export function downloadCanvasAsPng(canvas: HTMLCanvasElement, fileName: string): void {
+  canvas.toBlob(blob => {
+    if (blob) {
+      download(blob, `${fileName}.png`);
+    }
+  }, 'image/png');
+}

webapp/packages/core-utils/src/downloadCanvasAsSvg.ts

@@ -0,0 +1,18 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { download } from './download.js';
+
+export function downloadCanvasAsSvg(canvas: HTMLCanvasElement, fileName: string): void {
+  const img = canvas.toDataURL('image/png');
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${canvas.width}" height="${canvas.height}">
+    <image href="${img}" width="${canvas.width}" height="${canvas.height}"/>
+  </svg>`;
+  const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+  download(blob, `${fileName}.svg`);
+}

webapp/packages/core-utils/src/html2canvas.ts

@@ -0,0 +1,9 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+export * as html2canvas from 'html2canvas';

webapp/packages/core-utils/src/index.ts

@@ -93,3 +93,6 @@ export * from './bindFunctions.js';
 export * from './getDomainFromUrl.js';
 export * from './isNumber.js';
 export * from './getSubjectDifferences.js';
+export * from './html2canvas.js';
+export * from './downloadCanvasAsPng.js';
+export * from './downloadCanvasAsSvg.js';

webapp/yarn.lock

@@ -2229,6 +2229,7 @@ __metadata:
     "@types/whatwg-mimetype": "npm:^3"
     canvg: "npm:^4"
     fast-deep-equal: "npm:^3"
+    html2canvas: "npm:^1"
     md5: "npm:^2"
     mobx: "npm:^6"
     rimraf: "npm:^6"
@@ -9276,6 +9277,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"base64-arraybuffer@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "base64-arraybuffer@npm:1.0.2"
+  checksum: 10c0/3acac95c70f9406e87a41073558ba85b6be9dbffb013a3d2a710e3f2d534d506c911847d5d9be4de458af6362c676de0a5c4c2d7bdf4def502d00b313368e72f
+  languageName: node
+  linkType: hard
+
 "base64-js@npm:^1.3.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
@@ -10158,6 +10166,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-line-break@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "css-line-break@npm:2.1.0"
+  dependencies:
+    utrie: "npm:^1.0.2"
+  checksum: 10c0/b2222d99d5daf7861ecddc050244fdce296fad74b000dcff6bdfb1eb16dc2ef0b9ffe2c1c965e3239bd05ebe9eadb6d5438a91592fa8648d27a338e827cf9048
+  languageName: node
+  linkType: hard
+
 "css-selector-parser@npm:^3.0.0":
   version: 3.1.3
   resolution: "css-selector-parser@npm:3.1.3"
@@ -12682,6 +12699,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html2canvas@npm:^1":
+  version: 1.4.1
+  resolution: "html2canvas@npm:1.4.1"
+  dependencies:
+    css-line-break: "npm:^2.1.0"
+    text-segmentation: "npm:^1.0.3"
+  checksum: 10c0/6de86f75762b00948edf2ea559f16da0a1ec3facc4a8a7d3f35fcec59bb0c5970463478988ae3d9082152e0173690d46ebf4082e7ac803dd4817bae1d355c0db
+  languageName: node
+  linkType: hard
+
 "http-assert@npm:^1.3.0":
   version: 1.5.0
   resolution: "http-assert@npm:1.5.0"
@@ -18144,6 +18171,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"text-segmentation@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "text-segmentation@npm:1.0.3"
+  dependencies:
+    utrie: "npm:^1.0.2"
+  checksum: 10c0/8b9ae8524e3a332371060d0ca62f10ad49a13e954719ea689a6c3a8b8c15c8a56365ede2bb91c322fb0d44b6533785f0da603e066b7554d052999967fb72d600
+  languageName: node
+  linkType: hard
+
 "through@npm:^2.3.6, through@npm:^2.3.8":
   version: 2.3.8
   resolution: "through@npm:2.3.8"
@@ -18864,6 +18900,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"utrie@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "utrie@npm:1.0.2"
+  dependencies:
+    base64-arraybuffer: "npm:^1.0.2"
+  checksum: 10c0/eaffe645bd81a39e4bc3abb23df5895e9961dbdd49748ef3b173529e8b06ce9dd1163e9705d5309a1c61ee41ffcb825e2043bc0fd1659845ffbdf4b1515dfdb4
+  languageName: node
+  linkType: hard
+
 "uuid@npm:^13":
   version: 13.0.0
   resolution: "uuid@npm:13.0.0"