fix: Better image export by moving from dom-to-image-more to html2canvas

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();
+      });
     }
   }
 

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",