feat: Changement de librairie

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "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",
@@ -1796,6 +1797,11 @@
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.11",
+      "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",
@@ -4680,6 +4686,11 @@
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
     },
+    "html-to-image": {
+      "version": "1.11.11",
+      "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",

package.json

@@ -11,6 +11,7 @@
   },
   "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",

public/spin.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<g><path d="M758.7,873c10.4,17.7,4.6,41.2-13.6,51.1c-18,10.4-40.7,4.3-50.9-13.7c-10.9-17.7-4.5-40.7,13.1-51.1C725.7,848.9,748.3,855.4,758.7,873L758.7,873z M537.9,952.8L537.9,952.8c0,20.4-16.9,37.5-38,37.5c-20.4,0-37.5-16.6-37.5-37.5v-26.2c0-20.9,17.1-37.5,37.5-37.5c20.8,0,38,16.6,38,37.5V952.8L537.9,952.8z M306.6,910.5L306.6,910.5c-10.7,18.5-33.7,24.4-51.4,13.9c-18.2-10.2-24.7-33.2-13.9-51.4l27.8-48.7c10.7-18,33.7-24.1,51.9-13.9c17.7,10.5,24.1,33.7,13.4,51.4L306.6,910.5L306.6,910.5z M127.3,759L127.3,759c-18.2,10.2-41.5,4-51.4-13.9c-10.7-17.7-4.6-41,13.3-51.4l75-43.4c17.9-9.9,41.2-4.3,51.3,13.9c10.2,17.7,4.1,41-13.9,51.4L127.3,759L127.3,759z M47.4,537.6L47.4,537.6c-20.8,0-37.4-16.9-37.4-37.5c0-20.9,16.6-37.7,37.4-37.7h116.8c20.8,0,37.5,16.9,37.5,37.5c0,20.9-16.6,37.7-37.5,37.7H47.4L47.4,537.6z M89.2,306.1L89.2,306.1c-18.2-10.2-24-33.2-13.3-51.1c9.9-18.2,33.2-24.4,51.4-13.9l126.8,73.6c18,10.2,23.9,33.2,14,50.8c-10.7,18.2-33.7,24.1-51.4,13.9L89.2,306.1L89.2,306.1z M241.3,126.7L241.3,126.7l88.3,153.4c10.8,17.9,33.7,24.4,51.7,13.7c17.9-10.2,23.8-33.5,13.3-51.4L306,89.2c-10.2-17.7-33.2-24.1-50.8-13.7C236.9,86,231.1,109.1,241.3,126.7L241.3,126.7z M462.4,47.5L462.4,47.5c0-20.3,17.1-37.7,37.5-37.7c20.8,0,38,16.9,38,37.7v176.7c0,20.9-16.9,37.7-38,38c-20.4,0-37.5-16.6-37.5-38V47.5L462.4,47.5z M693.6,89.2L693.6,89.2c10.7-18.2,33.5-24.1,51.5-13.9c18.2,10.2,24.6,33.2,13.8,51.4l-88.6,153.4c-9.8,17.9-33.4,24.4-51.3,13.9c-18-10.5-23.9-33.7-13.7-51.6L693.6,89.2L693.6,89.2z M873.5,241L873.5,241l-153.6,88.6c-17.9,10.2-24.1,33.2-14,51.4c10.7,17.7,33.8,23.5,51.4,13.7l153.7-88.6c17.6-10.2,24-33.2,13.4-51.1C914.3,236.7,891.2,230.3,873.5,241L873.5,241z M952.5,462.4L952.5,462.4c21.1,0,37.8,16.9,37.5,37.7c0,20.6-16.4,37.5-37.5,37.5h-177c-20.3,0-37.4-16.9-37.4-37.7c0-20.6,17.1-37.5,37.4-37.5H952.5L952.5,462.4z"/></g>
+</svg>

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