A Plugin of jQuery For Image Cropping – Cropper.js

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

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

List Of Version :
  • v2.0.0-alpha.1
  • v2.0.0-alpha
  • 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
  • v1.3.4
  • v1.3.3
  • v1.3.2
  • v1.3.1
  • v1.3.0
  • v1.2.2
  • v1.2.1
  • v1.2.0
  • v1.1.3
  • v1.1.2

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