Resize/Rotate/Crop Images With jQuery - Cropzee

Resize/Rotate/Crop Images With jQuery - Cropzee
File Size: 10.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Cropzee is an easy, lightweight jQuery image cropper which enables the user to resize, rotate, and crop an image for further use.

Based on jQuery, jQuery UI and HTML5 canvas. Perfect for image upload and profile avatar components.

Choose an image from your computer, select an area (image) with mouse or touch, and click the Crop button. That's it.

How to use it:

1. Load the needed jQuery and jQuery UI libraries in the html document.

<link rel="stylesheet" href="/path/to/jquery-ui.min.css">
<script src="/path/to/jquery.min.js" ></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Load the jqueryui-touch-punch for touch events.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js" defer></script>

3. Download and load the Cropzee plugin's files.

<link rel="stylesheet" href="/path/to/cropzee.css">
<script src="/path/to/cropzee.js" defer></script>

4. Create a file input that allows the user to select an images from the local.

<input id="cropzee-input" type="file" name="">

5. Create a preview container to display the cropped image.

<div id="" class="image-previewer" data-cropzee=""></div>

6. Create a hidden canvas element for the image cropper.

<canvas id="cropzee-hidden-canvas"></canvas>

7. Create a modal window in which you can resize/rotate/crop the image.

<div id="cropzee-modal" class="cropzee-modal">
  <div id="cropzee-close" class="cropzee-close">&times;</div>
  <div id="cropzee-modal-display-container" class="cropzee-modal-display-container">
    <div id="cropzee-modal-display" class="cropzee-modal-display"></div>
    <div id="cropzee-modal-cropper" class="cropzee-modal-cropper"></div>
    <div id="cropzee-modal-display2" class="cropzee-modal-display" style="clip: rect(46px, 205px, 205px, 46px);"></div>
    <div id="cropzee-cropper-outline" class="cropzee-cropper-outline" style="left:45px; top:45px; width: 160px; height: 160px;"></div>
  </div>
  <div class="cropzee-modal-buttons-container">
    <a id="cropzee-download-button" class="cropzee-modal-button" data-ripple="">
      <img class="cropzee-svg" src="assets/icons/feather/download.svg">
    </a>
    <a id="cropzee-rotate-button" class="cropzee-modal-button" data-ripple="">->
      <img class="cropzee-svg" src="assets/icons/feather/rotate-ccw.svg">
    </a>
    <a id="cropzee-crop-button" class="cropzee-modal-button" data-ripple="">
      <img class="cropzee-svg" src="assets/icons/feather/crop.svg">
    </a>
    <a id="cropzee-save-button" class="cropzee-modal-button" data-ripple="">
      <img class="cropzee-svg" src="assets/icons/feather/check-square.svg">
    </a>
  </div>
</div>

8. Create another canvas element to preview the cropped image in the modal.

<div class="cropzee-cropping-canvas-container">
  <canvas id="cropzee-cropping-canvas"></canvas>
</div>

9. Initialize the image cropper by calling the function on the file input.

cropzee("#cropzee-input");

This awesome jQuery plugin is developed by BossBelle. For more Advanced Usages, please check the demo page or visit the official website.