Author: | FlameWolf |
---|---|
Views Total: | 13,329 views |
Official Page: | Go to website |
Last Update: | July 1, 2019 |
License: | MIT |
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
How can we change the image resolution at time of download??
Not sure what I’m doing wrong, but alignment doesn’t work at all when the image is relatively big (like 4000×4000 pixels)