From c359083654e8b681cd9313d15fb8556fc8ed5f31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michal=20Bryxi=CC=81?= Date: Wed, 25 Sep 2024 12:57:39 +0200 Subject: [PATCH] fix: Better image export by moving from dom-to-image-more to html2canvas --- app/components/open-to/export/index.gjs | 16 ++++----- package.json | 2 +- pnpm-lock.yaml | 47 ++++++++++++++++++++----- 3 files changed, 47 insertions(+), 18 deletions(-) diff --git a/app/components/open-to/export/index.gjs b/app/components/open-to/export/index.gjs index 35df83e..d053897 100644 --- a/app/components/open-to/export/index.gjs +++ b/app/components/open-to/export/index.gjs @@ -6,9 +6,9 @@ import OpenToFilesPreview from 'open-to-dot-dot-dot/components/open-to/files/pre import OpenToFilesUpload from 'open-to-dot-dot-dot/components/open-to/files/upload'; import { t } from 'ember-intl'; import { Button } from '@frontile/buttons'; -import domtoimage from 'dom-to-image-more'; import { action } from '@ember/object'; import { on } from '@ember/modifier'; +import html2canvas from '@jsplumb/html2canvas'; export default class OpenToExport extends Component { @service fileQueue; @@ -20,14 +20,12 @@ export default class OpenToExport extends Component { @action exportImages() { for (const file of this.fileQueue.files) { - domtoimage - .toJpeg(document.getElementById(file.id)) - .then(function (dataUrl) { - var link = document.createElement('a'); - link.download = 'my-image-name.jpeg'; - link.href = dataUrl; - link.click(); - }); + html2canvas(document.getElementById(file.id)).then((canvas) => { + var link = document.createElement('a'); + link.download = 'my-image-name.jpeg'; + link.href = canvas.toDataURL('image/png'); + link.click(); + }); } } diff --git a/package.json b/package.json index 6d3a218..29bd598 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@glint/environment-ember-loose": "1.4.0", "@glint/environment-ember-template-imports": "1.4.0", "@glint/template": "1.4.0", + "@jsplumb/html2canvas": "^1.4.1", "@rollup/plugin-babel": "^6.0.4", "@tsconfig/ember": "^3.0.8", "@types/ember": "^4.0.11", @@ -83,7 +84,6 @@ "autoprefixer": "^10.0.0", "concurrently": "^8.2.2", "decorator-transforms": "^2.2.0", - "dom-to-image-more": "^3.4.5", "ember-auto-import": "^2.7.4", "ember-cli": "~5.11.0", "ember-cli-babel": "^8.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee94381..063fb0a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,6 +78,9 @@ importers: '@glint/template': specifier: 1.4.0 version: 1.4.0 + '@jsplumb/html2canvas': + specifier: ^1.4.1 + version: 1.4.1 '@rollup/plugin-babel': specifier: ^6.0.4 version: 6.0.4(@babel/core@7.25.2)(rollup@4.22.4) @@ -183,9 +186,6 @@ importers: decorator-transforms: specifier: ^2.2.0 version: 2.2.0(@babel/core@7.25.2) - dom-to-image-more: - specifier: ^3.4.5 - version: 3.4.5 ember-auto-import: specifier: ^2.7.4 version: 2.8.1(@glint/template@1.4.0)(webpack@5.94.0) @@ -1848,6 +1848,10 @@ packages: '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} + '@jsplumb/html2canvas@1.4.1': + resolution: {integrity: sha512-+2LdKyiZ0vJe0Lfx7vvVTyCtrNn+xXryotZnFDuZMTkgFGzw1CaEZ7fxbesl7oGqyYlzVD2lf3ngeqiSj4PhBg==} + engines: {node: '>=8.0.0'} + '@lint-todo/utils@13.1.1': resolution: {integrity: sha512-F5z53uvRIF4dYfFfJP3a2Cqg+4P1dgJchJsFnsZE0eZp0LK8X7g2J0CsJHRgns+skpXOlM7n5vFGwkWCWj8qJg==} engines: {node: 12.* || >= 14} @@ -2880,6 +2884,10 @@ packages: balanced-match@2.0.0: resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==} + base64-arraybuffer@1.0.2: + resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==} + engines: {node: '>= 0.6.0'} + base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -3630,6 +3638,9 @@ packages: resolution: {integrity: sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==} engines: {node: '>=12 || >=16'} + css-line-break@2.1.0: + resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==} + css-loader@5.2.7: resolution: {integrity: sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==} engines: {node: '>= 10.13.0'} @@ -3840,9 +3851,6 @@ packages: dom-element-descriptors@0.5.1: resolution: {integrity: sha512-DLayMRQ+yJaziF4JJX1FMjwjdr7wdTr1y9XvZ+NfHELfOMcYDnCHneAYXAS4FT1gLILh4V0juMZohhH1N5FsoQ==} - dom-to-image-more@3.4.5: - resolution: {integrity: sha512-xLkG5idpEPgfuf5bZ82kbNnXq4U4PAB4wd7Zun7cEHrYvjolMtTQdIlheQURS8jLy07TGZeWqoTqGW6onZr0Tw==} - domexception@2.0.1: resolution: {integrity: sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==} engines: {node: '>=8'} @@ -7387,6 +7395,9 @@ packages: engines: {node: '>= 7.*'} hasBin: true + text-segmentation@1.0.3: + resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==} + text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} @@ -7705,6 +7716,9 @@ packages: resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==} engines: {node: '>= 0.4.0'} + utrie@1.0.2: + resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==} + uuid@8.3.2: resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==} hasBin: true @@ -10178,6 +10192,11 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 + '@jsplumb/html2canvas@1.4.1': + dependencies: + css-line-break: 2.1.0 + text-segmentation: 1.0.3 + '@lint-todo/utils@13.1.1': dependencies: '@types/eslint': 8.56.12 @@ -11567,6 +11586,8 @@ snapshots: balanced-match@2.0.0: {} + base64-arraybuffer@1.0.2: {} + base64-js@1.5.1: {} base64id@2.0.0: {} @@ -12401,6 +12422,10 @@ snapshots: css-functions-list@3.2.2: {} + css-line-break@2.1.0: + dependencies: + utrie: 1.0.2 + css-loader@5.2.7(webpack@5.94.0): dependencies: icss-utils: 5.1.0(postcss@8.4.47) @@ -12593,8 +12618,6 @@ snapshots: dom-element-descriptors@0.5.1: {} - dom-to-image-more@3.4.5: {} - domexception@2.0.1: dependencies: webidl-conversions: 5.0.0 @@ -17299,6 +17322,10 @@ snapshots: - walrus - whiskers + text-segmentation@1.0.3: + dependencies: + utrie: 1.0.2 + text-table@0.2.0: {} textextensions@2.6.0: {} @@ -17652,6 +17679,10 @@ snapshots: utils-merge@1.0.1: {} + utrie@1.0.2: + dependencies: + base64-arraybuffer: 1.0.2 + uuid@8.3.2: {} uvu@0.5.6: