Hola, buenos días.
Alguien sabe como puedo utilizar para convertir una cadena base64 en una imagen (formado png), de forma que pueda guardar la imagen en un archivo?
Se trata de una aplicación de firma electrónica. Puedo obtener la firma en un formato de base 64 que la tengo guardada en un campo, pero es necesario para salvar la firma como un archivo de imagen a utilizar para integrarse en un informe.
Gracias anticipadamente por vuestra ayuda.
Maria Granados.
Hola María.
Ya habrás imaginado que necesitas usar el API de Velneo para conseguir eso.
El proceso es el siguiente:
- Cargas el string Base64 en un ByteArray mediante la clase VByteArray
oByteArray_B64.setText(theRegisterIn.fieldToString("FIRMA_B64"))
- Decodificamos el string Base64 a valores binarios del PNG original
oByteArray_PNG.fromBase64(oByteArray_B64)
- Obtenemos un objeto Imagen con la Firma PNG. Usamos la clase VImage
oImage.loadFromData(oByteArray_PNG,'PNG')
- Guardamos en disco la Firma como un fichero de extensión png
oImage.save(<firma.png>)
- o en un campo de tipo Objeto Binario (de tipo binario para no perder la transparencia del PNG)
theRegisterIn.setFieldByteArray("FIRMA_BIN", oByteArray_PNG)
Como ves es muy sencillo, además en el foro este es un tema recurrente.
Saludos
Paco Satué
Hola Paco,
Cogiendo el ejemplo que le adjuntaste a la Maria, y siguiendo cada linea consigo guardar la cadena base64 a un archivo PNG, que además guarda la transparencia correctamente.
Pero si en vez de quererlo guardar en un archivo PNG, lo quiero guardar en un campo de tipo Objeto Dibujo no me respeta la transparencia.
¿Como puedo hacerlo para que consiga en un campo Objeto Dibujo tener una imagen obtenida desde un archivo?
Saludos
Hola Ramon.
No sé si le ha funcionado a María porque no ha contestado.
La teoría dice que el campo Objeto de Tipo Binario almacena el contenido sin ningún tipo de manipulación y/o conversión.
Por lo tanto y siendo el PNG un fichero en formato binario no deberías tener pérdida de información, en este caso el canal Alfa.
En resumen, el campo Objeto de Tipo Binario devuelve la información tal cual ha sido guardada, independientemente del tipo de archivo que hayamos utilizado.
Saludos
Paco Satué
Ok entendido Paco lo del campo Objeto Binario,
¿Pero puedo guardar esa imagen en un campo Objeto Dibujo para poderla utilizar posteriormente en un informe nativo.?
O dicho de otra forma, ¿como puedo insertar o recuperar una imagen de un archivo PNG a un informe nativo?
Saludos,
Muchas gracias por tu ayuda, de VERDAD.
Hola Ramon.
Que yo sepa los Informes nativos solo admiten Dibujos estáticos (adjuntos al proyecto como jpeg o png) y los campos Objeto Dibujo (en este caso solo es posible jpeg).
Si tienes dibujos PNG con transparencia, y quieres guardarlos en una tabla para mostrarlos en Informes, tendrás que convertirlos a JPEG con una herramienta externa.
Lamentablemente la conversión que hace Velneo de PNG a JPEG cuando guardamos en un campo de Tipo Dibujo, no funciona.
Ya de paso vota la Idea de crear campos PNG y SVG, que sería un gran avance en gestión de gráficos.
Saludos
Paco Satué
Muchísimas gracias Paco,
Por tu explicación, buscare otra solución (Que pena tener que ir a fuera cuando casi lo tenemos dentro)
Ye he realizado un nuevo voto en la Base de conocimiento/Ideas ( Nuevos tipos de campo de Dibujo PNG y SVG )
Saludos
Muéstrala en formato HTML en un control “Caja de texto enriquecido”
…
<textarea>
</textarea>
…
En un vReport (en teoría) se pueden mostrar imágenes en formato base64 como un control HTML o como imagen/formato: “Codificado Base64” (adjunto captura de pantalla)
Prueba a ver si a ti te funciona
Juan Figueroa
Perdón….
<textarea name=“textarea” cols=“50” rows=“2” wrap=“VIRTUAL”>
Juen Figueroa
Vaya, no funciona
a ver así
img src='data:image/png;base64,#AVP%LOGO-BASE64%'A ver si esta es la definitiva:
hay que componer la línea html de la siguiente manera o equivalente
“img src=’data:image/png;base64,” + #LOGO-BASE64 + “’”
Demonks no dice nada
Será que no le gustan nuestras propuestas
Quizá lo que yo digo es una obviedad
Hola Basesoft,
Disculpa no haber contestado, es más os agradezco mucho vuestras aportaciones.
Estoy en ello, es más estoy en la ultima parte de tu código
“img src=’data:image/png;base64,” + #LOGO-BASE64 + “’”
Pero no consigo que funcione y me estoy peleando a ratitos.
Saludos,
Maria Granados
hay que meterlo en un HTML completo (al menos a mí sólo me funcionó así)
Te adjunto captura de pantalla de un campo fórmula para mostrar el logo que está en la misma tabla
También hace falta controlar la renderización con el CSS y los márgenes y mostrarlo en un control Campo enriquecido
Hola Juan.
El código HTML en el Control de Texto enriquecido de los Informes nativos es el siguiente:
(Para vReport no he probado todavía este código)
[!DOCTYPE html]
[html]
[head]
[style]
body { overflow:hidden; }
html { overflow:hidden; }
.recortable { position: absolute; height: 300px; width: 150px; left: 0px; top: 0px; }
[/style]
[/head]
[body]
<div class='recortable'><img src='image/png;base64," + #REC_NENES.NENE_B64 + "' /></div>
[/body]
[/html]
Podéis verlo en funcionamiento en el apartado “Superponer imágenes transparentes usando VByteArray” de los ejercicios (vatp://pruebas:pruebas@v7cloud6.velneo.com:8894/0PS_Varios_iapp). Pulsar Ctrl+F1 en el formulario para acceder a la ayuda y al código HTML del control Texto enriquecido.
Verás que en el Informe nativo se han superpuesto varias imágenes PNG. Evidentemente con el campo Objeto Tipo Dibujo de Velneo es imposible porque no soporta transparencia. La gestión de cadenas Base64 suple esta deficiencia grave de Velneo.
Votad la Idea https://soporte.velneo.es/entries/27432238-Nuevos-tipos-de-campo-de-Dibujo-PNG-y-SVG para mejorar las prestaciones gráficas de la base de datos.
Saludos
Paco Satué
Hola
Paso el código HTML otra vez con corchetes para evitar problemas con la “porquería” de editor Online que tenemos.
[!DOCTYPE html]
[html]
[head]
[style]
body { overflow:hidden; }
html { overflow:hidden; }
.recortable { position: absolute; height: 300px; width: 150px; left: 0px; top: 0px; }
[/style]
[/head]
[body]
[[div id='capa_modelo' class='recortable']][[img src='data:image/png;base64," + #REC_NENES.NENE_B64 + "'/]][[/div]]
[/body]
[/html]
Saludos
Paco Satué
Hola Paco. Si utilizas el botón “code” de este editor, podrás compartir ese código HTML sin problemas.
Muestra:
<!DOCTYPE html>
<html>
<head>
<style>
body { overflow:hidden; }
html { overflow:hidden; }
.recortable { position: absolute; height: 300px; width: 150px; left: 0px; top: 0px; }
</style>
</head>
<body>
<div id='capa_modelo' class='recortable'><img src='data:image/png;base64," + #REC_NENES.NENE_B64 + "'/></div>
</body>
</html>
Un saludo.
Hola David.
Hasta ahora utilizaba los tag “pre” y “code” y funcionaba bien. Si inspeccionas el código HTML de tu mensaje y el mío verás que son iguales y sin embargo el mío no se visualiza bien, por lo menos en Firefox.
Cuando uso el botón “code” se insertan dos apóstrofes y pensaba que era un error del editor.
Voy a probar a partir de ahora con los códigos BBCode -> code y /code entre corchetes.
"<!DOCTYPE html>
<html>
<head>
<style>
body { overflow:hidden; }
html { overflow:hidden; }
.recortable {
position: absolute;
height: 300px;
width: 150px;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<!-- No ha funcionado el solapar 2 capas -->
<div class='recortable'><img src='image/png;base64," + #REC_NENES.NENE_B64 + "' /></div>
</body>
</html>
"Retiro lo de “porquería” pero sí es cierto que debería haber un Preview del mensaje o ya de paso actualizar a un editor Web 2.0.
Saludos y gracias
Paco Satué
Hola David.
Otro intento con las marcas html de BBCode.
[html]
"<!DOCTYPE html>
<html>
<head>
<style>
body { overflow:hidden; }
html { overflow:hidden; }
.recortable { position: absolute; height: 300px; width: 150px; left: 0px; top: 0px; }
</style>
</head>
<body>
<!-- No ha funcionado el solapar 2 capas →
Saludos
Paco Satué
Hola David.
¿Cómo se usan entonces los códigos BBCode para dar formato al texto?
Saludos
Paco Satué