From 96253a7006c41b933112fc4eba728469cc02c300 Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Mon, 26 Sep 2022 12:05:32 +0200
Subject: [PATCH] ahora funciona bien descargar desde el lado del Form

---
 src/lib/form/Form.svelte       | 16 ++++++++++++++--
 src/lib/preview/Preview.svelte | 15 ++-------------
 src/lib/stores/store.js        |  3 ++-
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte
index 6a59236..e5a364f 100644
--- a/src/lib/form/Form.svelte
+++ b/src/lib/form/Form.svelte
@@ -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 {
diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte
index 3ef5297..46d3d84 100644
--- a/src/lib/preview/Preview.svelte
+++ b/src/lib/preview/Preview.svelte
@@ -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>
diff --git a/src/lib/stores/store.js b/src/lib/stores/store.js
index 6372e1b..0736dea 100644
--- a/src/lib/stores/store.js
+++ b/src/lib/stores/store.js
@@ -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();