ahora funciona bien descargar desde el lado del Form

pull/1/head
Borja Robert 2 years ago
parent 6d70c35dcb
commit 96253a7006

@ -1,9 +1,9 @@
<script>
import { onMount } from 'svelte';
import { title, heading, subtitle, content, date, address } from '$lib/stores/store';
import html2canvas from 'html2canvas';
import { title, heading, subtitle, content, date, address, canvas } from '$lib/stores/store';
/** @type {HTMLDivElement} */ let editor;
let innerHTML;
const handleSubmit = async () => {
console.log('submit');
@ -17,6 +17,17 @@
$content = editor.firstChild.innerHTML;
};
const downloadCanvas = async () => {
if ($canvas !== undefined) {
const res = await html2canvas($canvas);
const image = await res.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'cartel.png';
link.href = image;
link.click();
}
};
const quillOptions = {
modules: {
toolbar: [['bold', 'italic']]
@ -70,6 +81,7 @@
</div>
</div>
</form>
<button on:click|preventDefault={downloadCanvas}>Descargar</button>
<style>
.form-group {

@ -1,9 +1,8 @@
<script>
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 inner;
const convertDateTime = (datetime) => {
if (datetime == undefined) {
@ -25,19 +24,10 @@
$: if ($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>
<div class="preview">
<div class="result" bind:this={inner}>
<div class="result" bind:this={$canvas}>
<div class="heading">{$heading}</div>
<div class="title">{$title}</div>
<div class="subtitle">{$subtitle}</div>
@ -46,7 +36,6 @@
{#if newdate}<div class="time">{newdate.time}</div>{/if}
<div class="address">{$address}</div>
</div>
<button on:click|preventDefault={takeScreenshot}>Descargar</button>
</div>
<style>

@ -1,4 +1,4 @@
import {writable} from 'svelte/store'
import { writable } from 'svelte/store'
export const title = writable("");
export const heading = writable("");
@ -6,3 +6,4 @@ export const subtitle = writable("");
export const content = writable("");
export const date = writable("");
export const address = writable("");
export const canvas = writable();

Loading…
Cancel
Save