Un Cropper de imagen ligero sin dependencias-imagecrop. js

Vista prévia

Descripción

imagecrop. js es un Cropper de imagen de JavaScript ligero, libre de dependencias y vainilla que tiene la capacidad de recortar una imagen específica con un área de recorte arrastrable y de tamaño variable.

Funcionamiento

Enlace al archivo JavaScript principal imagecrop. js como este:

<script src="dist/imagecrop.min.js"></script>

No olvide cargar la hoja de estilos requerida en la sección Head de su página HTML.

<link rel="stylesheet" href="dist/imagecrop.min.css">

Cree un elemento DIV para el Cropper de imagen.

<div class="example"></div>

Inicialice el Cropper de la imagen y especifique la ruta a la imagen que desea recortar.

const img_c = new ImageCropper(



".example",



"1.jpg"
);

Posibles opciones para el Cropper de imagen.

const img_c = new ImageCropper(



".example",



"1.jpg",



{




// callbacks




update_cb : () => {},




create_cb : () => {},




destroy_cb : () => {},





// width & height options




min_crop_width : 100,




min_crop_height : 100,




max_width : 500,




max_height : 500,





// constrain the size of the cropped area to be fixed or not




 fixed_size : false,





// 'square' or 'circular'




mode : 'square',



 }
);

Devuelva una cadena Base64 que luego puede hacer algunas cosas interesantes.

// mime_type: 'image/jpeg' or 'image/png'
// quality: 0 ~ 1
var img_b64_str = img_c.crop(mime_type, quality);

Destruye el Cropper de la imagen.

img_c.destroy();

Registro de cambios

v1.4.0 (09/14/2018)

• actualizar