Crop Images Before Uploading - jQuery FineCrop

File Size: 11 KB
Views Total: 28128
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Crop Images Before Uploading - jQuery FineCrop

FineCrop is an easy image cropping jQuery plugin which provides a convenient interface to zoom/move/crop local images before uploading. Heavily based on HTML5 canvas API.

How to use it:

1. Import the FineCrop plugin and other required resources into the webpage.

<link href="css/fineCrop.css" rel="stylesheet">
<script src="" 
<script src="js/fineCrop.js"></script>

2. Create a file input to select a local image you want to crop.

<input type="file" id="upphoto" style="display:none;">
<label for="upphoto">
  <div class="inputLabel">
    click here to upload an image

3. Create an empty img tag to display the cropped image.

<img id="croppedImg">

4. Create the html for the image crop area.

  • "xmove": for horizontal moving
  • "ymove": for vertical moving
  • "zplus": zoom in button
  • "zminus": zoom out button
  • "cropSubmit": submitting the crop
  • "closeCrop": closing the cropping screen
<div class="cropHolder">
  <div id="cropWrapper">
      <img id="inputImage" src="images/face.jpg">
  <div class="cropInputs">
      <div class="inputtools">
                  <img src="images/horizontal.png">
              <span>horizontal movement</span>
          <input type="range" class="cropRange" name="xmove" id="xmove" min="0" value="0">
      <div class="inputtools">
                  <img src="images/vertical.png">
              <span>vertical movement</span>
          <input type="range" class="cropRange" name="ymove" id="ymove" min="0" value="0">
      <button class="cropButtons" id="zplus">
          <img src="images/add.png">
      <button class="cropButtons" id="zminus">
          <img src="images/minus.png">
      <button id="cropSubmit">submit</button>
      <button id="closeCrop">Close</button>

5. Call the function on the file input to activate the image crop plugin.

  viewHeight: 500,
  cropWidth: 200,
  cropHeight: 200,
  cropInput: 'inputImage',
  cropOutput: 'croppedImg',
  zoomValue: 50

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