KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

vanilla-image-cropper

★ 56 Open GitHub ↗

A lightweight vanilla js image cropper, with zero dependency requirements

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Lightweight Javascript ImageCropper

[![Build Status](https://travis-ci.org/peterver/vanilla-image-cropper.svg?branch=master)](https://travis-ci.org/peterver/vanilla-image-cropper)
[![npm](https://img.shields.io/npm/v/vanilla-image-cropper.svg)](https://www.npmjs.com/package/vanilla-image-cropper)
[![npm](https://img.shields.io/npm/dt/vanilla-image-cropper.svg?maxAge=2592000)]()
[![npm](https://img.shields.io/npm/l/vanilla-image-cropper.svg?maxAge=2592000)]()
<a target="_blank" href="https://www.paypal.me/peterver"><img src="https://img.shields.io/badge/PayPal-Donate-blue.svg?style=flat" title="Buy me a beer" alt="Buy me a beer"/></a>

A lightweight javascript imagecropper written in vanilla js
with zero-dependency injection that builds itself into an object.

For a live preview and some example code, visit [http://peterver.github.io/vanilla-image-cropper/](http://peterver.github.io/vanilla-image-cropper/)

# Getting Started

```javascript
var img_c = new ImageCropper(parent, image, options);
```

### parent
The parent can be one of two things. It's either an HTML5 css **selector** (such as '#myTestDiv' or '.myclass .mysubclass'), or a **dom node**.

It should point to the element where you want the imagecropper to be located.

### image
The image can either be a javascript Image object loaded through a FileReader, this can be done like so
```javascript
var reader = new FileReader();

reader.onload = function (evt) {
  var img_c = new ImageCropper(..., evt.target.result, ...);
};

reader.readAsDataURL(...myfile...);
```

Or you can simply pass an existing url, for example

```javascript
var img_c = new ImageCropper(..., '../assets/my_img.jpg', ...);
```

### options
There are several possible options defined for the image cropper

* **max_width** 
 Sets the maximum width that the imagecropper can become 
* **max_height** 
 Sets the maximum height for the imagecropper 
* **min_crop_width** 
 The minimum width that the cropped image can be 
* **min_crop_height** 
 The miminum height that the cropped image can be 
* **create_cb** 
 A callback function that is called when the imagecropper has finished creating, this will pass an object containing the dimensions of the imagecropper ( for styling or positioning purposes ) 
* **update_cb** 
 Callback function that is called everytime a move/change happens 
* **destroy_cb** 
 A callback function that is called when the imagecropper has finished destroying itself 
* **fixed_size** 
 A boolean ( true | false ), that tells the image cropper if it should constrain the size of the cropped area to be fixed or not ? 
* **mode** (default = 'square') 
 Sets the type of preview you should see when using the image cropper, possible options are
 * _'square'_
 * _'circular'_

# Cropping an image (mime_type, quality)
When you're all done with your changes, you can crop the image by calling the **crop** function.

This will return a base64 string that you can then do some funky stuff with.

```javascript
var img_b64_str = img_c.crop(mime_type, quality);
... // do some funky stuff here
```

### mime_type ( default = 'image/jpeg')
The following mime_types are currently supported in this build, they need to be passed as a string value.
* image/jpeg
* image/png

### Quality
The quality is a numeric value between 0 and 1. Where 1 is the highest quality setting, and 0 is the lowest quality setting.

# Cleaning up an imagecropper instance

```javascript
img_c = new ImageCropper('#test-imagecrop', 'img.jpg');
img_c.destroy();
```

or you can just delete the dom node that the image cropper was created in ( or its parent ),
and the imagecropper instance will destroy itself :]

# Example
For an example, check out the example folder in the repository

# Author

- [Peter Vermeulen](https://github.com/peterver)

# Contributors
- [marcelopc](https://github.com/marcelopc)

vanilla-image-cropper

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README