Desde la versión 4.4.2300.44 se incorpora el nuevo componente al personalizador, el Componente de imagen se puede localizar en la sección del personalizador destinada a los componentes.


El ejemplo de uso de la caja de imagen. 


Ampliando la ficha de cliente, añadimos el componente imagen, ubicándolo por ejemplo antes del resto de componentes. 

Se establece en el campo valor el nombre del campo que previamente habremos indicado en el proceso de alta de cliente para que la imagen sea grabada en la base d datos en Base 64.



Este componente permite un gran número de tamaños que han sido probados en la fase de testeo, En este ejemplo se ha establecido de la siguiente forma cuadrada y con bordes redondeados.



El componente imagen requiere un espacio de trabajo mínimo, de este modo cada vez que se suelte una imagen sobre la zona marcada para ello en la TPV deberá aparecer la nueva para ser editada, una vez editada se colocará en su lugar correspondiente.

Se configurarán una serie de estándares para el recorte:

4:3 para las imágenes horizontales.
1:1 para las imágenes cuadradas (damos un margen de 30px aproximadamente por si no fueran exactamente cuadradas).
2:3 para las imágenes verticales.


A continuación se presentan los distintos escenarios verificados con respecto a los tamaños definidos en este componente.

Cargar imagen guardada como cuadrada

  •  Ancho=160 Alto=200 (Predefinido vertical)
  •  Ancho=320 Alto=400 (Vertical)
  •  Ancho=250 Alto=400 (Vertical)
  •  Ancho=150 Alto=80 (Horizontal)
  •  Ancho=150 Alto=100 (Horizontal)
  •  Ancho=400 Alto=250 (Horizontal)
  •  Ancho=200 Alto=200 (Cuadrada)
  •  Ancho=400 Alto=400 (Cuadrada)

Cargar imagen guardada como vertical

  •  Ancho=160 Alto=200 (Predefinido vertical)
  •  Ancho=320 Alto=400 (Vertical)
  •  Ancho=250 Alto=400 (Vertical)
  •  Ancho=150 Alto=80 (Horizontal)
  •  Ancho=150 Alto=100 (Horizontal)
  •  Ancho=400 Alto=250 (Horizontal)
  •  Ancho=200 Alto=200 (Cuadrada)
  •  Ancho=400 Alto=400 (Cuadrada)

Cargar imagen guardada como horizontal

  •  Ancho=160 Alto=200 (Predefinido vertical)
  •  Ancho=320 Alto=400 (Vertical)
  •  Ancho=250 Alto=400 (Vertical)
  •  Ancho=150 Alto=80 (Horizontal)
  •  Ancho=150 Alto=100 (Horizontal)
  •  Ancho=400 Alto=250 (Horizontal)
  •  Ancho=200 Alto=200 (Cuadrada)
  •  Ancho=400 Alto=400 (Cuadrada)

Recortar imagen y ver que se acople bien al padre cuando se recorte en estos escenarios

  •  Ancho=160 Alto=200 (Predefinido vertical)
  •  Ancho=320 Alto=400 (Vertical)
  •  Ancho=250 Alto=400 (Vertical)
  •  Ancho=150 Alto=80 (Horizontal)
  •  Ancho=150 Alto=100 (Horizontal)
  •  Ancho=400 Alto=250 (Horizontal)
  •  Ancho=200 Alto=200 (Cuadrada)
  •  Ancho=400 Alto=400 (Cuadrada)


El resultado final en el modelo es el que se visualiza a continuación.



Para añadir una imagen basta con arrastrarla al recuadro mediante drag and drop o pulsando sobre la imagen y seleccionando una desde la ruta de explorador de archivos de Windows. 


NOTA:

En caso de no poder añadir una imagen y no visualizar el icono de papelera, debemos revisar que el componente no esté en modo lectura.


Una vez seleccionada la imagen, de forma automática esta se encaja en el componente y permite realizar un recorte o ajuste utilizando los puntos que aparecen en la propia imagen.



Para que el cambio de ajuste o recorte surta efecto, se pulsa fuera de la imagen en el espacio en blanco y esta se recorta. Si se desea eliminar, pulsar sobre el icono rojo de la papelera,