crop

Simple fronend image cropping tool

Cropping tool to work with Cross-Origin Resource Sharing policy restricted images.

Returns cropped base64 line or url of the image with crop coordinated {url, x, y, w, h}.
Canvas needed
Canvas is set to be responsive and fill parent element 100%
Mobile events is in progress

##Planned API/deps No dependencies, just a compatible with querySelectorAll, FileReader and canvas.toDataURL, so the most close guess would be >ie8.

Html code prereqs

to have a canvas

Optional ways to load:

set src in text input
set file input
set src directly

<canvas id="canvas-live" width="400" height="400"></canvas>

Javascript initialisation and API:

var c = Crop('#canvas-live');
// canvas selector

c.setFileInput('#inp-file', function() {
    console.log('file added');
});
// file input selector
// on change event we load the image to the canvas

c.setUrlInput('#inp-src', '#btn-src', 'click');
// text input selector where to get src value
// button(or whatever)  selector on firing which we load an image to the canvas with image with src from previous text input
// event type on button selector

c.setCropTrigger('#btn-crop', 'click', function(val) {
    console.log(val);
});
// button(or whatever) selector on pushing which we crop and return result
// event
// callback function

c.setUrl(url);
// you can set the image source by passing url directly

c.setBase64(val);
// you can set the image by passing base64 string directly

##Tested

MacBook Pro (Retina, Mid 2012)
OSX El Capitan 10.11.1
Safari Version 9.0.1
Google Chrome 47.0.2526.73 (64-bit)
Mozilla Firefox 35.0.1
Windows 8
Google Chrome 47.0.2526.80
Internet Explorer 11.0.9600.17105

##Known issues

No mobile support yet
Blurry image when zooming in browser

fullcrimp/crop

crop

Simple fronend image cropping tool