|
|
@ -1,9 +1,8 @@
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import html2canvas from 'html2canvas';
|
|
|
|
import html2canvas from 'html2canvas';
|
|
|
|
import { title, subtitle, date, address, content, heading } from '$lib/stores/store';
|
|
|
|
import { title, subtitle, date, address, content, heading, canvas } from '$lib/stores/store';
|
|
|
|
|
|
|
|
|
|
|
|
let newdate = '';
|
|
|
|
let newdate = '';
|
|
|
|
let inner;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const convertDateTime = (datetime) => {
|
|
|
|
const convertDateTime = (datetime) => {
|
|
|
|
if (datetime == undefined) {
|
|
|
|
if (datetime == undefined) {
|
|
|
@ -25,19 +24,10 @@
|
|
|
|
$: if ($date !== '') {
|
|
|
|
$: if ($date !== '') {
|
|
|
|
newdate = convertDateTime($date);
|
|
|
|
newdate = convertDateTime($date);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const takeScreenshot = async () => {
|
|
|
|
|
|
|
|
const res = await html2canvas(inner);
|
|
|
|
|
|
|
|
const image = await res.toDataURL('image/png');
|
|
|
|
|
|
|
|
const link = document.createElement('a');
|
|
|
|
|
|
|
|
link.download = 'cartel.png';
|
|
|
|
|
|
|
|
link.href = image;
|
|
|
|
|
|
|
|
link.click();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="preview">
|
|
|
|
<div class="preview">
|
|
|
|
<div class="result" bind:this={inner}>
|
|
|
|
<div class="result" bind:this={$canvas}>
|
|
|
|
<div class="heading">{$heading}</div>
|
|
|
|
<div class="heading">{$heading}</div>
|
|
|
|
<div class="title">{$title}</div>
|
|
|
|
<div class="title">{$title}</div>
|
|
|
|
<div class="subtitle">{$subtitle}</div>
|
|
|
|
<div class="subtitle">{$subtitle}</div>
|
|
|
@ -46,7 +36,6 @@
|
|
|
|
{#if newdate}<div class="time">{newdate.time}</div>{/if}
|
|
|
|
{#if newdate}<div class="time">{newdate.time}</div>{/if}
|
|
|
|
<div class="address">{$address}</div>
|
|
|
|
<div class="address">{$address}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button on:click|preventDefault={takeScreenshot}>Descargar</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
<style>
|
|
|
|