# Pacoideas - Trabajar con imágenes PNG con transparencia

**URL:** <https://foros.velneo.com/t/pacoideas-trabajar-con-imagenes-png-con-transparencia/10966>\
**Category:** Compartir código fuente y ejemplos\
**Created:** [3 Febrero, 2022 00:05 UTC](https://foros.velneo.com/t/pacoideas-trabajar-con-imagenes-png-con-transparencia/10966 "2022-02-03T00:05:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pacosatu](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/pacosatu/32/5131_2.png) [@pacosatu](https://foros.velneo.com/u/pacosatu)\
**Post date:** [3 Febrero, 2022 00:05 UTC](https://foros.velneo.com/t/pacoideas-trabajar-con-imagenes-png-con-transparencia/10966/1 "2022-02-03T00:05:24Z")

</div>

Hola.

![imagen](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/7/71120674e98655067b9962e8235a10b2cf3417e8.png)

En aplicaciones de determinados entornos empresariales es necesario trabajar con la gestión de **imágenes** , ya sea como mapas de **bits** o **vectoriales**.

Cuando en un formulario hay que **superponer** imágenes para mostrar despieces o tampones superpuestos es necesario que éstas dispongan del canal de transparencia en la información del color.

> Si necesitamos guardar nuestras imágenes en la base de datos Velneo, únicamente disponemos del campo **Objeto Dibujo** para almacenar imágenes **jpeg**. En este tipo de campo se pierde la información del canal alfa o **transparencia**.

Por lo tanto necesitamos un mecanismo que nos permita almacenar las imágenes con transparencia en formato PNG para poder superponerlas en el formulario.

![imagen](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/e/e21c3bde527b9fcf6bdf3c390e56cc86eadff751.png)

> En Velneo no disponemos de un control que nos permita visualizar una imagen creada de forma dinámica. El objeto del API [VImageWidget](https://doc.velneo.com/velneo-vdevelop/scripts/lenguajes/javascript/clases/vimagewidget) (control del formulario para dibujos estáticos) sería el candidato perfecto.

La idea consiste en solucionar esta limitación aplicando estas dos acciones:

- Almacenar las imágenes en el campo **Objeto Binario** que no altera el archivo original, preservando todas sus características.
- Usar el control **Botón** para mostrar las imágenes en el formulario después de obtener un objeto [VImage](https://doc.velneo.com/velneo-vdevelop/scripts/lenguajes/javascript/clases/vimage) del API.

El código javascript del **API** es muy sencillo:

```auto
// Script que muestra la imagen del campo Binario en un Botón del formulario
importClass("VImage")
// Obtiene la referencia al control Botón
var oDib = theRoot.dataView().control("CMD_CUA_DIB")
// Crea una nueva imagen
var oImagen = new VImage()
// Obtenemos un ByteArray desde el campo Binario
var oBinario = theRegisterIn.fieldToByteArray("IMAGEN_BIN") 
// Cargamos la imagen PNG desde el ByteArray y lo asignamos al Icono del Botón
if (oImagen.loadFromData(oBinario, "PNG")) {
    oDib.setIcon(oImagen)
}

```

Por último asignamos el siguiente **CSS** al Botón del formulario para que se muestre correctamente la imagen:

```auto
QPushButton {
  background-color: transparent;
  padding: 0px;
  qproperty-iconSize: 200px;
}

```

Ahora solo nos queda **superponer** los Botones con las imágenes en un Layout y voilà.

![imagen](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/0/0b32f719392b18b209199f216a0cedbacb86030a.png)

Saludos  
Paco Satué

---

<div class="post-metadata">

**Author:** ![carlosan](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/carlosan/32/5706_2.png) [@carlosan](https://foros.velneo.com/u/carlosan)\
**Post date:** [3 Febrero, 2022 09:51 UTC](https://foros.velneo.com/t/pacoideas-trabajar-con-imagenes-png-con-transparencia/10966/2 "2022-02-03T09:51:47Z")

</div>

Si, se ve maravilloso además de necesario.  
El código javascript es muy sencillo y el idea conjunta para hacer funcionar todo es fantástica además de gratuita (copy-paste al reservorio).

Qué no hará javascript.

Lo que me joroba es encontrar tanta flaqueza en el sistema nativo y que cuando nos añaden cosas nuevas y buenas como nativas (P.ej. todas esas funciones de la versión 29: getCurrentObjectId, getMainObjectId etc) parecen en el fondo atajos o funciones javascript camufladas, cosa mía que imagino al ver que no incorporan la refactorización.  
Entre todas las cosas buenas de Velneo, la refactorización está entre mis primeras favoritas y el uso de javascript o QML rompe con la refactorización por motivos evidentes.

Todo será cosa de acostumbrarse y aceptar a javascript y QML como complementos que fortalecen Velneo en lugar verlo como vías de escape para sus limitaciones.

Muchísimas gracias por esta idea tan buena. 🖖🏾

---

<div class="post-metadata">

**Author:** ![estisoft](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/estisoft/32/5714_2.png) [@estisoft](https://foros.velneo.com/u/estisoft)\
**Post date:** [7 Febrero, 2022 00:44 UTC](https://foros.velneo.com/t/pacoideas-trabajar-con-imagenes-png-con-transparencia/10966/3 "2022-02-07T00:44:41Z")

</div>

Gracias por el aporte. Lo probé y funciona excelente.