Author: | peterver |
---|---|
Views Total: | 3,981 views |
Official Page: | Go to website |
Last Update: | September 14, 2018 |
License: | MIT |
Preview:

Description:
imagecrop.js is a lightweight, dependency-free, vanilla JavaScript image cropper that has the ability to crop a specific image with a draggable, resizable crop area.
How to use it:
Link to the main JavaScript file imagecrop.js as this:
<script src="dist/imagecrop.min.js"></script>
Don’t forget to load the required style sheet in the head section of your HTML page.
<link rel="stylesheet" href="dist/imagecrop.min.css">
Create a DIV element for the image cropper.
<div class="example"></div>
Initialize the image cropper and specify the path to the image you want to crop.
const img_c = new ImageCropper( ".example", "1.jpg" );
Possible options for the image cropper.
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', } );
Return a base64 string that you can then do some cool things.
// mime_type: 'image/jpeg' or 'image/png' // quality: 0 ~ 1 var img_b64_str = img_c.crop(mime_type, quality);
Destroy the image cropper.
img_c.destroy();
Changelog:
v1.4.0 (09/14/2018)
- Update