From b59374cf85c6cfcb2995eaaa444c7a23e37320be Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Tue, 14 Oct 2025 19:34:26 +0200 Subject: [PATCH] uses canvas2html for downloading images --- webapp/packages/core-utils/package.json | 1 + .../core-utils/src/downloadCanvasAsPng.ts | 17 +++++++ .../core-utils/src/downloadCanvasAsSvg.ts | 18 ++++++++ webapp/packages/core-utils/src/html2canvas.ts | 9 ++++ webapp/packages/core-utils/src/index.ts | 3 ++ webapp/yarn.lock | 45 +++++++++++++++++++ 6 files changed, 93 insertions(+) create mode 100644 webapp/packages/core-utils/src/downloadCanvasAsPng.ts create mode 100644 webapp/packages/core-utils/src/downloadCanvasAsSvg.ts create mode 100644 webapp/packages/core-utils/src/html2canvas.ts diff --git a/webapp/packages/core-utils/package.json b/webapp/packages/core-utils/package.json index b76b01e2fa..5ec8b467ed 100644 --- a/webapp/packages/core-utils/package.json +++ b/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", diff --git a/webapp/packages/core-utils/src/downloadCanvasAsPng.ts b/webapp/packages/core-utils/src/downloadCanvasAsPng.ts new file mode 100644 index 0000000000..3430e7a166 --- /dev/null +++ b/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'); +} diff --git a/webapp/packages/core-utils/src/downloadCanvasAsSvg.ts b/webapp/packages/core-utils/src/downloadCanvasAsSvg.ts new file mode 100644 index 0000000000..5df0e13b03 --- /dev/null +++ b/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 = ` + + `; + const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }); + download(blob, `${fileName}.svg`); +} diff --git a/webapp/packages/core-utils/src/html2canvas.ts b/webapp/packages/core-utils/src/html2canvas.ts new file mode 100644 index 0000000000..549b9d562f --- /dev/null +++ b/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'; diff --git a/webapp/packages/core-utils/src/index.ts b/webapp/packages/core-utils/src/index.ts index b6732c9992..0bfa3cf840 100644 --- a/webapp/packages/core-utils/src/index.ts +++ b/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'; diff --git a/webapp/yarn.lock b/webapp/yarn.lock index 6b1acdbf46..f47a526622 100644 --- a/webapp/yarn.lock +++ b/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"