
imageResizer is a lightweight, easy-to-use image cropper & resizer plugin based on jQuery and HTML5 canvas
element.
The plugin creates a resizable, movable, rectangular/circular crop area to select and crop an area of an image you specify.
1. Create the information & image crop containers on the webpage.
<div id="infoContainer"></div> <div id="cropContainer"></div>
2. Create a button to perform the crop function.
<button class="resize-done">Done</button>
3. Import jQuery JavaScript library and the jQuery imageResizer plugin into the document.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="jquery.resizeImage.test.js"></script> <link rel="stylesheet" href="style.css">
4. Call the plugin on the crop container and specify the image you want to crop.
$('#cropContainer').resizeImage({ image: '1.jpg', btnDoneAttr: '.resize-done' });
5. Display the cropped image on the page.
$('#cropContainer').resizeImage({ image: '1.jpg', btnDoneAttr: '.resize-done' }, function( imgResized ){ $('#infoContainer').html( '<img src="'+ imgResized +'">' ) })
6. More configuration options with default values.
$('#cropContainer').resizeImage({ // Formats: 3/2, 200x360, auto imgFormat: 'auto', // lg-md, sm-xs device: 'all', // true => circle, square ( by default ) circleCrop: false, // image zoom options zoomable: true, zoomMax: 2, // black, white outBoundColor: 'black' })
This awesome jQuery plugin is developed by fabrice8. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 20.06.2018
- Source