From 5edc85c9f75704189579b2605071a92abe944698 Mon Sep 17 00:00:00 2001 From: amazuecos Date: Wed, 8 Jan 2025 20:56:27 +0100 Subject: [PATCH] add downloadPreviewImage function to download image as png from the current shape selected --- .../form/presupuestos/admin/_previewItems.php | 222 ++++++++++-------- .../presupuestoAdmin/presupuestoAdminEdit.js | 34 ++- 2 files changed, 157 insertions(+), 99 deletions(-) diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/admin/_previewItems.php b/ci4/app/Views/themes/vuexy/form/presupuestos/admin/_previewItems.php index e898e029..28f57423 100644 --- a/ci4/app/Views/themes/vuexy/form/presupuestos/admin/_previewItems.php +++ b/ci4/app/Views/themes/vuexy/form/presupuestos/admin/_previewItems.php @@ -2,134 +2,134 @@

+ data-bs-parent="#accordionPreview">
    @@ -171,7 +171,7 @@
-
+
@@ -206,6 +206,9 @@
+
+ +
@@ -249,7 +252,7 @@
-
+
@@ -284,6 +287,9 @@
+
+ +
@@ -327,7 +333,7 @@ -
+
@@ -362,6 +368,9 @@
+
+ +
@@ -375,7 +384,7 @@
-
+
@@ -405,7 +414,7 @@
-
+
@@ -440,6 +449,10 @@
+
+ +
+
@@ -483,7 +496,7 @@
-
+
@@ -516,6 +529,9 @@
+
+ +
@@ -552,7 +568,7 @@
@@ -560,7 +576,7 @@
-
+
@@ -593,6 +609,9 @@
+
+ +
@@ -636,7 +655,7 @@ -
+
@@ -671,6 +690,9 @@
+
+ +
@@ -714,7 +736,7 @@ -
+
@@ -752,6 +774,9 @@
+
+ +
@@ -795,7 +820,7 @@ -
+
@@ -817,6 +842,9 @@
+
+ +
@@ -860,7 +888,7 @@ -
+
@@ -922,66 +950,64 @@ $('#tab-pv-bn').on( "click", function() { - previewInteriorPlana('bn', , ); +previewInteriorPlana('bn', , ); } ); $('#tab-pv-bnhq').on( "click", function() { - previewInteriorPlana('bnhq', , ); +previewInteriorPlana('bnhq', , ); } ); $('#tab-pv-color').on( "click", function() { - previewInteriorPlana('color', , ); +previewInteriorPlana('color', , ); } ); $('#tab-pv-colorhq').on( "click", function() { - previewInteriorPlana('colorhq', , ); +previewInteriorPlana('colorhq', , ); } ); $('#tab-pv-rot-bn').on( "click", function() { - previewRotativa('rot_bn', , ); +previewRotativa('rot_bn', , ); } ); $('#tab-pv-rot-color').on( "click", function() { - previewRotativa('rot_color', , ); +previewRotativa('rot_color', , ); } ); $('#tab-pv-guardas').on( "click", function() { - previewInteriorPlana('guardas', , ); +previewInteriorPlana('guardas', , ); } ); $('#tab-pv-cubierta').on( "click", function() { - previewInteriorPlana('cubierta', , ); +previewInteriorPlana('cubierta', , ); } ); $('#tab-pv-esquema-cubierta').on( "click", function() { - previewEsquemaCubierta('ec', , ); +previewEsquemaCubierta('ec', , ); } ); $('#tab-pv-sobrecubierta').on( "click", function() { - previewInteriorPlana('sobrecubierta', , ); +previewInteriorPlana('sobrecubierta', , ); } ); */ -endSection() ?> - - +endSection() ?> \ No newline at end of file diff --git a/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js b/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js index f556f9cc..2d061698 100644 --- a/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js +++ b/httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js @@ -67,7 +67,7 @@ class PresupuestoAdminEdit { this.datosLibro.init(); this.comparador.init(); this.lineasPresupuesto.init(); - + this.previewFormasAdmin = new PreviewFormasAdmin(tipoLibro, this.tipoTapa, { ancho: () => this.getDimensionLibro().ancho, @@ -93,6 +93,7 @@ class PresupuestoAdminEdit { sessionStorage.removeItem('message'); } } + this.downloadPreviewImage(); } #cargarPresupuesto() { @@ -257,6 +258,37 @@ class PresupuestoAdminEdit { showBreadCrumbSaveButton(true); }); } + downloadPreviewImage() { + $(document).on("click", ".download-shape", (event) => { + let parentDiv = $(event.currentTarget).parent().parent(); + let shapeSvgElQuery = $(parentDiv).find("svg"); + let shapeSvgEl = shapeSvgElQuery[0]; + const filename = shapeSvgElQuery.parent().attr("id") ?? "image" + const serializer = new XMLSerializer(); + const svgData = serializer.serializeToString(shapeSvgEl); + const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' }); + const svgUrl = URL.createObjectURL(svgBlob); + const img = new Image(); + img.onload = () => { + const canvas = document.createElement('canvas'); + canvas.width = img.width; + canvas.height = img.height; + const ctx = canvas.getContext('2d'); + ctx.drawImage(img, 0, 0); + const pngUrl = canvas.toDataURL('image/png'); + const downloadLink = document.createElement('a'); + downloadLink.href = pngUrl; + downloadLink.download = filename ?? '.png'; + document.body.appendChild(downloadLink); + downloadLink.click(); + document.body.removeChild(downloadLink); + + URL.revokeObjectURL(svgUrl); + }; + + img.src = svgUrl; + }) + } }