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> <script>
import { onMount } from 'svelte'; 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; /** @type {HTMLDivElement} */ let editor;
let innerHTML;
const handleSubmit = async () => { const handleSubmit = async () => {
console.log('submit'); console.log('submit');
@ -17,6 +17,17 @@
$content = editor.firstChild.innerHTML; $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 = { const quillOptions = {
modules: { modules: {
toolbar: [['bold', 'italic']] toolbar: [['bold', 'italic']]
@ -70,6 +81,7 @@
</div> </div>
</div> </div>
</form> </form>
<button on:click|preventDefault={downloadCanvas}>Descargar</button>
<style> <style>
.form-group { .form-group {

@ -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>

@ -6,3 +6,4 @@ export const subtitle = writable("");
export const content = writable(""); export const content = writable("");
export const date = writable(""); export const date = writable("");
export const address = writable(""); export const address = writable("");
export const canvas = writable();

Loading…
Cancel
Save