1. Products
  2.   Image
  3.   JavaScript
  4.   Cropper
 
  

JavaScript API to Crop Images

Open Source JavaScript Library that supports cropping JavaScript Apps.

Cropper is an open source JavaScript library that allows cropping images in your browser. Using the API you can add enhanced cropping features to your application with 27 different methods, 39 different options, and 6 events. Using the API you can easily work and crop your images in your browser.

This library provides support to a wide range of cropping features. It supports cropping images via touch screen, zooming, rotating, scaling & flipping, using multiple croppers, allows cropping images on canvas, allows cropping images on browser-side canvas with cross-browser supports.

Previous Next

Getting Started with Cropper

The recommended way to install cropper via NPM. Please use the following command to install it.

Install cropper via NPM

 npm install cropperjs 

Crop Images inside JavaScript Apps

The Cropper library gives software programmers the capability to programmatically crop their images using JavaScript. In order to crop an image, you need to load the image and ensure that the size of the image fits the container perfectly. After you have your image ready, you can perform a set of cropping features on the given x and y coordinates including rotating, flipping, scaling, and setting height and width as per your requirement. .

Crop Image & Save It via JavaScript API

 // vars
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';

// on change show image with crop options
upload.addEventListener('change', e => {
  if (e.target.files.length) {
    // start file reader
    const reader = new FileReader();
    reader.onload = e => {
      if (e.target.result) {
        // create new image
        let img = document.createElement('img');
        img.id = 'image';
        img.src = e.target.result;
        // clean result before
        result.innerHTML = '';
        // append new image
        result.appendChild(img);
        // show save btn and options
        save.classList.remove('hide');
        options.classList.remove('hide');
        // init cropper
        cropper = new Cropper(img);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  }
});

// save on click
save.addEventListener('click', e => {
  e.preventDefault();
  let imgSrc = cropper.getCroppedCanvas({
    width: img_w.value // input value
  }).toDataURL();
  cropped.classList.remove('hide');
  img_result.classList.remove('hide');
  cropped.src = imgSrc;
  dwn.classList.remove('hide');
  dwn.download = 'imagename.png';
  dwn.setAttribute('href', imgSrc);
});

Crop Images in Browser using JavaScript

You can add image cropping functionality in your apps and users can crop images directly from the browser. Users can upload or drag-drop images in the browser and apply cropping features to it. The API provides cross-browser compatibility. The API works fine using the latest version of Chrome, Firefox, Safari, Opera, Edge, and Internet Explorer.

Crop Images Online via JavaScript

 //instantiate Cropper
var cropper = canvas.cropper({
  aspectRatio: 16 / 9
});

//Crop Image
$('#btnCrop').click(function() {
  // Get a string base 64 data url
  var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
  $result.append( $('').attr('src', croppedImageDataURL) );
});

Using Cropping Methods in JavaScript

In order to provide flexibility, the API provides a bunch of methods to crop images. These methods help the developer to add image cropping features to the application easily. The API provides the method crop() to crop the image. Furthermore, you can use reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData(), getCanvasData() and more.

Zoom Canvas to Absolute Ratio via JavaScript

 cropper.zoomTo(1); // 1:1 (canvasData.width === canvasData.naturalWidth)

const containerData = cropper.getContainerData();

// Zoom to 50% from the center of the container.
cropper.zoomTo(.5, {
  x: containerData.width / 2,
  y: containerData.height / 2,
});
 English