feat: Changement de librairie

src/assets/base.css

@@ -81,6 +81,18 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body.print {
+  --color-highlight-background: var(--color-white);
+  --color-highlight-text: var(--color-black);
+  --color-highlight-text-invert: var(--color-white);
+  --color-header-background: var(--color-white);
+  --color-header-text: var(--color-black);
+}
+
+.print .no-print {
+  display: none
+}
+
 .btn {
   width: 3rem;
   height: 3rem;

src/components/Score.vue

@@ -10,6 +10,7 @@ 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';
 
 const props = defineProps({
   id: {
@@ -113,14 +114,41 @@ function nextQuestion() {
   }, 100);
 }
 
+const saveAs = (blob, fileName) =>{
+  var elem = window.document.createElement('a');
+  elem.href = blob
+  elem.download = fileName;
+  elem.style = 'display:none;';
+  (document.body || document.documentElement).appendChild(elem);
+  if (typeof elem.click === 'function') {
+    elem.click();
+  } else {
+    elem.target = '_blank';
+    elem.dispatchEvent(new MouseEvent('click', {
+      view: window,
+      bubbles: true,
+      cancelable: true
+    }));
+  }
+  URL.revokeObjectURL(elem.href);
+  elem.remove()
+}
+
+const sharing = ref(false);
 async function share() {
-  console.log(document.querySelector(".latest"));
-  const canvas = await html2canvas(document.querySelector("html"));
-  let anchor = document.createElement("a");
-  anchor.download = "download.png";
-  anchor.href = canvas.toDataURL("image/png");
-  anchor.click();
-  anchor.remove();
+  sharing.value = true
+  // const canvas = await html2canvas(document.querySelector("html"));
+  // let anchor = document.createElement("a");
+  // anchor.download = "download.png";
+  // anchor.href = canvas.toDataURL("image/png");
+  // anchor.click();
+  // anchor.remove();
+  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>
 
@@ -175,9 +203,9 @@ async function share() {
             </ul>
           </div>
           <button
-            class="btn download"
+            class="btn download no-print"
             @click="() => share()"
-            data-html2canvas-ignore
+            v-if="!sharing"
           >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
               <path
@@ -198,6 +226,9 @@ async function share() {
               />
             </svg>
           </button>
+          <button class="btn spin no-print" v-if="sharing">
+            <img src="/spin.svg">
+          </button>
         </div>
       </template>
       <template v-else>
@@ -230,6 +261,34 @@ async function share() {
 </template>
 
 <style lang="sass" scoped>
+.spin
+  bottom: 1.5rem
+  right: 1.5rem
+  img
+    position: absolute
+    top: 50%
+    left: 50%
+    width: 30px
+    height: 30px
+    margin: -15px 0 0 -15px
+    -webkit-animation: spin 2s linear infinite
+    -moz-animation: spin 2s linear infinite
+    animation: spin 2s linear infinite
+
+@-moz-keyframes spin
+  100%
+    -moz-transform: rotate(360deg)
+
+@-webkit-keyframes spin
+    100%
+      -webkit-transform: rotate(360deg)
+
+@keyframes spin
+  100%
+    -webkit-transform: rotate(360deg)
+    transform: rotate(360deg)
+
+
 .center
   text-align: center
 .download