feat: Suppression de html2canvas

package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "@splidejs/vue-splide": "^0.5.18",
         "html-to-image": "^1.11.11",
-        "html2canvas": "^1.4.1",
         "pinia": "^2.0.11",
         "pinia-plugin-persist": "^1.0.0",
         "sass": "^1.49.9",
@@ -544,14 +543,6 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
-    "node_modules/base64-arraybuffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
-      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -854,14 +845,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-line-break": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
-      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
-      "dependencies": {
-        "utrie": "^1.0.2"
-      }
-    },
     "node_modules/csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
@@ -1802,18 +1785,6 @@
       "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
       "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
     },
-    "node_modules/html2canvas": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
-      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
-      "dependencies": {
-        "css-line-break": "^2.1.0",
-        "text-segmentation": "^1.0.3"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -3094,14 +3065,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/text-segmentation": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
-      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
-      "dependencies": {
-        "utrie": "^1.0.2"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3167,14 +3130,6 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
-    "node_modules/utrie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
-      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
-      "dependencies": {
-        "base64-arraybuffer": "^1.0.2"
-      }
-    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -3865,11 +3820,6 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
-    "base64-arraybuffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
-      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
-    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -4075,14 +4025,6 @@
         "which": "^2.0.1"
       }
     },
-    "css-line-break": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
-      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
-      "requires": {
-        "utrie": "^1.0.2"
-      }
-    },
     "csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
@@ -4691,15 +4633,6 @@
       "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
       "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
     },
-    "html2canvas": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
-      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
-      "requires": {
-        "css-line-break": "^2.1.0",
-        "text-segmentation": "^1.0.3"
-      }
-    },
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -5568,14 +5501,6 @@
         "terser": "^5.7.2"
       }
     },
-    "text-segmentation": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
-      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
-      "requires": {
-        "utrie": "^1.0.2"
-      }
-    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -5626,14 +5551,6 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
-    "utrie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
-      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
-      "requires": {
-        "base64-arraybuffer": "^1.0.2"
-      }
-    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "@splidejs/vue-splide": "^0.5.18",
     "html-to-image": "^1.11.11",
-    "html2canvas": "^1.4.1",
     "pinia": "^2.0.11",
     "pinia-plugin-persist": "^1.0.0",
     "sass": "^1.49.9",

src/components/Score.vue

@@ -9,8 +9,7 @@ import { Splide, SplideSlide } from "@splidejs/vue-splide";
 import Question from "./Question.vue";
 import "@splidejs/splide/dist/css/splide.min.css";
 import ScoreHeader from "./ScoreHeader.vue";
-import html2canvas from "html2canvas";
+import { toPng } from "html-to-image";
-import { toPng } from 'html-to-image';
 
 const props = defineProps({
   id: {
@@ -114,41 +113,37 @@ function nextQuestion() {
   }, 100);
 }
 
-const saveAs = (blob, fileName) =>{
+const saveAs = (blob, fileName) => {
-  var elem = window.document.createElement('a');
+  var elem = window.document.createElement("a");
-  elem.href = blob
+  elem.href = blob;
   elem.download = fileName;
-  elem.style = 'display:none;';
+  elem.style = "display:none;";
   (document.body || document.documentElement).appendChild(elem);
-  if (typeof elem.click === 'function') {
+  if (typeof elem.click === "function") {
     elem.click();
   } else {
-    elem.target = '_blank';
+    elem.target = "_blank";
-    elem.dispatchEvent(new MouseEvent('click', {
+    elem.dispatchEvent(
-      view: window,
+      new MouseEvent("click", {
-      bubbles: true,
+        view: window,
-      cancelable: true
+        bubbles: true,
-    }));
+        cancelable: true,
+      })
+    );
   }
   URL.revokeObjectURL(elem.href);
-  elem.remove()
+  elem.remove();
-}
+};
 
 const sharing = ref(false);
 async function share() {
-  sharing.value = true
+  sharing.value = true;
-  // const canvas = await html2canvas(document.querySelector("html"));
+  const body = document.querySelector("body");
-  // let anchor = document.createElement("a");
+  body.classList.add("print");
-  // anchor.download = "download.png";
+  const dataUrl = await toPng(body);
-  // anchor.href = canvas.toDataURL("image/png");
+  body.classList.remove("print");
-  // anchor.click();
+  saveAs(dataUrl, "my-node.png");
-  // anchor.remove();
+  sharing.value = false;
-  const body = document.querySelector("body")
-  body.classList.add("print")
-  const dataUrl = await toPng(body)
-  body.classList.remove("print")
-  saveAs(dataUrl, 'my-node.png')
-  sharing.value = false
 }
 </script>
 
@@ -227,7 +222,7 @@ async function share() {
             </svg>
           </button>
           <button class="btn spin no-print" v-if="sharing">
-            <img src="/spin.svg">
+            <img src="/spin.svg" />
           </button>
         </div>
       </template>