From f8958416fc2d3d8454b1f59223a0c5ebfca8d37c Mon Sep 17 00:00:00 2001 From: Simon C Date: Wed, 3 May 2023 16:10:44 +0200 Subject: [PATCH] feat: Changement de librairie --- package-lock.json | 11 ++++++ package.json | 1 + public/spin.svg | 3 ++ src/assets/base.css | 12 +++++++ src/components/Score.vue | 77 +++++++++++++++++++++++++++++++++++----- 5 files changed, 95 insertions(+), 9 deletions(-) create mode 100644 public/spin.svg diff --git a/package-lock.json b/package-lock.json index 958a67b..52551f8 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 6bb1093..4c7f549 100644 --- a/package.json +++ b/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", diff --git a/public/spin.svg b/public/spin.svg new file mode 100644 index 0000000..64b5305 --- /dev/null +++ b/public/spin.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/base.css b/src/assets/base.css index 5a78c01..5af0227 100644 --- a/src/assets/base.css +++ b/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; diff --git a/src/components/Score.vue b/src/components/Score.vue index e9e3382..532abf4 100644 --- a/src/components/Score.vue +++ b/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 } @@ -175,9 +203,9 @@ async function share() { +