diff --git a/package-lock.json b/package-lock.json index 52551f8..43b2ce5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 4c7f549..167d3aa 100644 --- a/package.json +++ b/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", diff --git a/src/components/Score.vue b/src/components/Score.vue index 532abf4..660e627 100644 --- a/src/components/Score.vue +++ b/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) =>{ - var elem = window.document.createElement('a'); - elem.href = blob +const saveAs = (blob, fileName) => { + var elem = window.document.createElement("a"); + 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.dispatchEvent(new MouseEvent('click', { - view: window, - bubbles: true, - cancelable: true - })); + elem.target = "_blank"; + elem.dispatchEvent( + new MouseEvent("click", { + view: window, + bubbles: true, + cancelable: true, + }) + ); } URL.revokeObjectURL(elem.href); - elem.remove() -} + elem.remove(); +}; const sharing = ref(false); async function share() { - 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 + sharing.value = true; + 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; } @@ -227,7 +222,7 @@ async function share() {