Author: | peterver |
---|---|
Views Total: | 5,861 views |
Official Page: | Go to website |
Last Update: | July 30, 2018 |
License: | MIT |
Preview:

Description:
imagecrop.js is a pure vanilla JavaScript library that creates a rectangle area around a given image allowing to visually resize an image and place a crop.
How to use it:
Load the imagecrop.min.css and imagecrop.js in your document.
<link rel="stylesheet" href="imagecrop.min.css"> <script src="imagecrop.js"></script>
Create a new image cropper instance.
// Selector: CSS selector for the image cropper // image_url: path to your image // options: available options. // -- max_width: the maximum width // -- max_height: the maximum height // -- update: callback function // -- min_crop_width: the minimum width that the cropped image can be // -- min_crop_height: the miminum height that the cropped image can be // -- create_cb: callback function // -- update_cb: callback function // -- destroy_cb: callback function // -- fixed_size: if it should constrain the size of the cropped area to be fixed or not ? // -- mode: the type of preview you should see when using the image cropper, 'square' or 'circular' img_c = new ImageCropper(selector, image_url, options);
Perform the image cropping.
// mime_type: image/jpeg or image/png // quality: 1 is the highest quality setting, and 0 is the lowest quality setting var img_b64_str = img_c.crop(mime_type, quality);
Changelog:
v1.4.0 (07/30/2018)
- Added more options
how to set backgrond color to white if i crop transparent png image ?
this the solution, i wrote wrong data type as parameter :
‘data:image/png’