CROPO

Cropo is a fast, lightweight image cropping tools for JavaScript. Resize and crop your uploaded image using a intuitive user interface.

Install Usage

Features

....

Lightweight

less than 2KB gzip

No dependencies

small footprint

Mobile friendly

Cross-browser support

Touch enabled

Pinch gesture

Easy To Use

Supports zooming

Supports to crop

Supports touch

Any Image

Supports any images format

Supports url and data url

Supports file

installation

Getting Started with Cropo

via NPM:

npm install --save cropo

Package page

via Yarn

yarn add --save cropo

Package page

Usage Guide

1

Include the cropo using ES modules 

import { Cropo } from 'cropo';

Or include the cropo using CommonJs

const { Cropo } = require('cropo');

initialize Cropo with the following code

const cropo = new Cropo({
    imageUrl: image,
    canvas: document.getElementById('canvas'),
    rangeInput: document.getElementById('inputRange')
})
2
3

Optionals

// download canvas image
cropo.download();
// get image as data url
cropo.getDataUrl();

Change Log

version >= 0.5.0

V0.5.4

add OnImageLoad callback - add support for multiple image whit Cropo class - add ability to crop image directly - now fit content can be disabled - make canvas resizable - download image whit custom size

V0.5.3

replace mouse and touch eventListeners whit pointer eventListeners - add zoom function - add basic documentation - add commonJs and EsModule support - replace parcel whit microbundle