Crop Image Before Uploading – jsCrop.js

Preview:

Description:

jsCrop.js is a small, canvas-based, vanilla JavaScript image cropper which lets you crop an image before uploading.

How to use it:

Import the necessary Stylesheet and JavaScript into the page.

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

Create a container to place your image to be cropped.

<div class="image-container">
  <img id="imageToCrop" src="1.jpg" alt="Image" />
</div>

Create a canvas element that will display the cropped image.

<div class="canvas-container">
  <canvas id="crop-result" width="200" height="300"></canvas>
</div>

Initialize the jsCrop library.

cropper = jsCrop.initialise(document.getElementById("imageToCrop"), { 
  "outputCanvas": document.getElementById("crop-result")
});

Enable/disable the crop mode on init. Default: true.

cropper = jsCrop.initialise(document.getElementById("imageToCrop"), { 
  "outputCanvas": document.getElementById("crop-result"),
  "startInCropMode": false
});

Enable the crop mode.

cropper.enableCropMode(ELEMENT.classList.toggle("pressed"));

Download the cropped image.

cropper.downloadCroppedImage();

Set the crop region.

cropper.setCropRegion(10, 10, 150, 250);

Set the target canvas on which you want to draw the cropped image.

cropper.setOutputCanvas(canvasElement);

Draw the cropped image manually.

cropper.drawCroppedImage();

Destroy the image cropper.

cropper.destroy();

Changelog:

07/01/2019

• JS & CSS update