A simple, plain JavaScript library to crop images.
Include the files js-crop-min.css
and js-crop-min.js
in your page. Invoke jsCrop
as:
let cropper = jsCrop.initialise(<<image-element>>, options);
For example, if your page has an <img>
element with its id
as imageToCrop
, this is how you would pass it to the jsCrop
constructor:
let cropper = jsCrop.initialise(document.getElementById("imageToCrop"));
⚠️ Warning: If you try to pass an image to theinitialise
function before it is loaded,jsCrop
may not work properly. To avoid this, put the call to theinitialise
function inside theload
event handler for the image, like this:document.getElementById("imageToCrop").addEventListener("load", function() { jsCrop.initialise(this); });
-
initialise (
imageElement, options
)
: Initialises a newjsCrop
instance using the specified image element. Theoptions
parameter is an object that defaults to{}
if not specified. It can have the below properties:outputCanvas
: A<canvas>
element on the page on to whichjsCrop
should draw the output image.startInCropMode
: Whether or not to display the crop grid initially. Default istrue
.
⚠️ Warning: CallingjsCrop.initialise
on an image that already has ajsCrop
instance associated with it will destroy thejsCrop
instance that is currently associated with it. This is by design. If you want to get thejsCrop
instance that is currently associated with an image, usejsCrop.getCurrentInstance
. -
getCurrentInstance (
imageElement
)
: Returns thejsCrop
instance that is currently associated with the specified image.
enableCropMode (
flag
)
: Turns crop mode on/off.setOutputCanvas (
canvasElement
)
: Specify a<canvas>
element on the page on to which jsCrop should draw the output image.drawCroppedImage
: Draw the crop result to the output canvas.downloadCroppedImage
: Download the crop result.setCropRegion (
left, top, width, height
)
: Set the position and size of the crop region.destroy
: Destroy thejsCrop
object and release the resources.
Visit https://flamewolf.github.io/jsCrop.html.
- If the image has a
z-index
value of anything other than"auto"
, thenjsCrop
might not work properly. This can be fixed by putting the image inside a<div>
and moving thez-index
value from the image to the container<div>
.