Croppie

El componente croppie se usa para recortar una imagen en un tamaño cualquiera a un formato estándar en la plataforma de buk, permite al usuario mantener el estándar en las imágenes que sube en todos los módulos donde exista el componente.

Playground

Upload croppie

Vista previa

CircularCuadrado

Cambiar Tamaño

Cambiar Ancho

Cambiar Alto

Ruby

<div class='form-group formulary-form-select-image'>
    <%= f.input :upload_croppie, as: :file,
                         input_html: {
                           id: 'upload_croppie_image',
                           accept: 'image/png,image/jpg,image/jpeg,image/gif',
                           data: { img_preview: '' }
                         } %>

    <%= croppie_widget 200, 200, :circle, 300, 300, enable_resize: false, input_id: croppie_id do |widget| %>
        <% widget %>
    <% end %>
    <%= f.hidden_field :croppie, id: "result_croppie", accept: "image/png,image/jpg,image/jpeg,image/gif" %>
</div>

Html

Para implementar croppie revisar documentación:

http://foliotek.github.io/Croppie/#documentation

Lista de parámetros

Parámetro

Tipo

Detalle

data-viewport-width	Number	Es el primer parámetro del componente, sirve para definir el ancho de la zona de recorte
data-viewport-height	Number	Es el segundo parámetro del componente, sirve para definir el alto de la zona de recorte
data-viewport-type	String	Define el tipo de recorte, puede ser :circle o :square
data-boundary-width	Number	Define el ancho del contenedor exterior del croppie, por defecto es el mismo tamaño del contenedor principal
data-boundary-height'	Number	Define el alto del contenedor exterior del croppie, por defecto es el mismo tamaño del contenedor principal
data-enable-resize	Boolean, default: false	Indica si está habilitada la opción de ajustar el tamaño de recorte
data-input-id	String	Asigna un ID para tener múltiples instancias

Anatomía

1. Título

Texto vista previa en formato h3.

2. Zona de corte / círculo o rectángulo

Determina el corte que tendrá la fotografía que esta detrás.

3. Zona oscurecida

Esta zona tiene como objetivo dar mejor visibilidad al área de corte de la imagen.

4. Imagen

La imagen de fondo es en primera instancia un placeholder predefinido, y en caso de subir una imagen será reemplazada.

5. Zona de manipulación imagen

Al posicionarse encima de esta zona se puede mover la imagen de fondo y hacer zoom.

6. Acciones del componente

Dentro de las acciones posibles para el componente están: reemplazar imagen, rotar a la izquierda la imagen, rotar a la derecha la imagen.

7. Acción final

En estas acciones se cierra el flujo para entregar la imagen cortada.

Casos de uso

El componente croppie se usa para cortar una imagen que sube el usuario en un formato cualquiera (jpg o png), una vez en el sistema el componente permite manipular, girar y recortar la imagen subida anteriormente, al guardar la imagen, está se agrega al componente final y la deja correctamente en el layout gráfico.

Caso 1: Cortar imagen circular

Usando la anatomía básica del componente

1. Al hacer click en personalizar reconocimiento se selecciona cargar imagen.
2. Se puede subir una imagen cualquiera en formato png y jpg.
3. El componente permite manipular la imagen, haciendo zoom y movimientos.
4. Se cierra la acción con el botón guardar en el modal.
5. Se agrega la imagen al componente con el corte correcto.

Ejemplos

En nuevo tipo de reconocimiento se puede personalizar reconocimiento, y el resultado es una imagen circular de tamaño correcto.

Caso 2: Cortar imagen rectangular

Usando la anatomía básica del componente

1. Al hacer click en subir imagen.
2. Se puede subir una imagen cualquiera en formato png y jpg.
3. El componente permite manipular la imagen, haciendo zoom y movimientos.
4. Se cierra la acción con el botón guardar en el modal.
5. Se agrega la imagen al componente con el corte correcto.

Ejemplos