feat: Changement de librairie
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
da9fd594a4
commit
f8958416fc
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 2.0 KiB |
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue