Improvement - Add html2canvas options to composables and config

Author: graphieros

src/img.js

@@ -1,10 +1,10 @@
 import html2canvas from 'html2canvas';
 
-export default function saveAsImage({ domElement, fileName, format = 'png' }) {
+export default function saveAsImage({ domElement, fileName, format = 'png', options = {} }) {
   if (domElement) {
     return new Promise((resolve, reject) => {
       const downloadLink = document.createElement('a');
-      html2canvas(domElement, { scale: 2 })
+      html2canvas(domElement, { ...options })
         .then((canvas) => {
           downloadLink.href = canvas.toDataURL(`image/${format}`);
           downloadLink.download = `${fileName}.${format}`;

src/pdf.js

@@ -1,15 +1,15 @@
 import html2canvas from 'html2canvas';
 import JsPDF from "jspdf";
 
-export default function pdf({domElement, fileName}) {
+export default function pdf({domElement, fileName, options = {} }) {
     if(domElement) {
             const a4 = {
             height: 851.89,
             width: 595.28,
         };
         const pdf = new JsPDF("", "pt", "a4");
         let contentWidth, contentHeight, imgWidth, imgHeight, pageData;
-        return html2canvas(domElement)
+        return html2canvas(domElement, { ...options })
             .then((canvasChart) => {
                 contentWidth = canvasChart.width;
                 contentHeight = canvasChart.height;

src/useConfig.js

@@ -171,7 +171,15 @@ export function useConfig() {
                 animation,
                 annotator
             },
-            buttonTitles
+            buttonTitles,
+            // html2canvas options
+            print: {
+                allowTaint: false,
+                backgroundColor: '#FFFFFF',
+                useCORS: false,
+                onclone: null,
+                scale: 2
+            }
         }
     }
 
@@ -2491,6 +2499,13 @@ export function useConfig() {
             fullscreen: 'Toggle fullscreen',
             annotator: 'Toggle annotator'
         },
+        userOptionsPrint: {
+            allowTaint: false,
+            backgroundColor: '#FFFFFF',
+            useCORS: false,
+            onclone: null,
+            scale: 2
+        },
         title: '',
         titleBold: true,
         titleFontSize: FONT._16,

src/usePrinter.js

@@ -3,7 +3,8 @@ import { ref } from "vue";
 export function usePrinter({
     elementId,
     fileName,
-    canPrint = true
+    canPrint = true,
+    options
 }) {
     const isPrinting = ref(false);
     const isImaging = ref(false);
@@ -20,6 +21,7 @@ export function usePrinter({
                     await pdf({
                         domElement: document.getElementById(elementId),
                         fileName,
+                        options
                     });
                 } catch (error) {
                     console.error("Error generating PDF:", error);
@@ -42,6 +44,7 @@ export function usePrinter({
                         domElement: document.getElementById(elementId),
                         fileName,
                         format: "png",
+                        options
                     });
                 } catch (error) {
                     console.error("Error generating image:", error);