✂ Cropnow

Fast and simple image cropper utility with Zero dependencies.

Demo

Install

npm i cropnow --save
// or
yarn add cropnow

Or include it via jsDelivr CDN (UMD):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropnow/index.css" />
<script src="https://cdn.jsdelivr.net/npm/cropnow/index.js"></script>

Usage

import 'cropnow/index.css'
import Cropnow from 'cropnow'

Example

const container = document.getElementById('container')

const options = {
  url: 'example.jpg',                         // image url (required)
  preview?: document.getElementById('preview'), // Preview dom container (optional)
  onCropEnded?:({ canvas, data }) => {        // event fired when crop is ended (optional)
    console.log(canvas, data)
  }
}

const cropper = new Cropnow(container, options)

Methods

• toPng(): void

download image as png.

• toJpeg(): void

download image as jpeg.

• getData(): object

Get the original size of image and current position of crop box.

• getCanvas(): HTMLCanvasElement

Get a canvas element with cropped image drawn.

• reset(): void

Reset crop box.

License

MIT