A Plugin of jQuery For Image Cropping – Cropper.js

Cropping
Feature Rich Image Cropping Plugin with Live Preview - Cropper
File Size: 18.37 KB
Views Total: 3496 views
Last Update:March 28, 2024
Publish Date: September 25, 2015
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

Cropper.js is an image cropper that uses the jQuery plugin for performing the operations, meanwhile having the instant previews and editable aspect ratio. A user can use this plugin for cropping any of the images before publishing it at a live platform. There is an adjustable box that provides aid to crop the image in any size without wasting time into some irrelevant tasks. More precisely, this feature never affects the image color and resolutions at all.

Table of Contents

How to use :

1. Add plugin links in web page :

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

2. Add Html code :

<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  <img id="image" src="picture.jpg">
</div>
/* Ensure the size of the image fit the container perfectly */
img {
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}

Add Plugin Script :

// import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

Done

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v2.0.0-beta.4
  • v2.0.0-beta.3
  • v2.0.0-beta.2
  • v2.0.0-beta.1
  • v2.0.0-beta
  • v2.0.0-alpha.2
  • v2.0.0-alpha.1
  • v2.0.0-alpha
  • v1.6.1
  • v1.6.0
  • v1.5.13
  • v1.5.12
  • v1.5.11
  • v1.5.10
  • v1.5.9
  • v1.5.8
  • v1.5.7
  • v1.5.6
  • v1.5.5
  • v1.5.4
  • v1.5.3
  • v1.5.2
  • v1.5.1
  • v1.5.0
  • v1.4.3
  • v1.4.2
  • v1.4.1
  • v1.4.0
  • v1.3.6
  • v1.3.5

Kayla Matthews

Howdy! I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 5 years.

Related jQuery Plugins

You Might Also Like