Skip to content

Latest commit

 

History

History
103 lines (77 loc) · 3.86 KB

README.md

File metadata and controls

103 lines (77 loc) · 3.86 KB
Raw

Lightweight Javascript ImageCropper

Build Status npm npm npm Buy me a beer

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/

Getting Started

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

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

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.

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

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

Contributors