A lightweight and simple JavaScript, Jquery, YUI plugin to crop your avatar
JavaScript CSS
Latest commit e15c3ad Oct 9, 2014 @hongkhanh optimize
Permalink
Failed to load latest commit information.
YUI optimize Oct 9, 2014
javascript optimize Oct 9, 2014
jquery optimize Oct 9, 2014
.gitignore initial commit Sep 15, 2014
LICENSE initial commit Sep 15, 2014
README.md add Asynchronous module definition (AMD) Oct 9, 2014
cropbox.jquery.json add Manifest Sep 17, 2014
screenshot.jpg initial commit Sep 15, 2014

README.md

cropbox.js

A lightweight and simple JavaScript, Jquery, YUI plugin to crop your avatar.

Features

  • support dataUrl for displaying image (function getDataURL)
  • support Blob for uploading image (function getBlob)

Screenshot

ScreenShot

Usage

Pure javascript

window.onload = function() {
    var options =
    {
        imageBox: '.imageBox',
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'avatar.png'
    }
    var cropper = new cropbox(options);
    document.querySelector('#file').addEventListener('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = new cropbox(options);
        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
    })
    document.querySelector('#btnCrop').addEventListener('click', function(){
        var img = cropper.getDataURL()
        document.querySelector('.cropped').innerHTML += '<img src="'+img+'">';
    })
    document.querySelector('#btnZoomIn').addEventListener('click', function(){
        cropper.zoomIn();
    })
    document.querySelector('#btnZoomOut').addEventListener('click', function(){
        cropper.zoomOut();
    })
};

Demo

Jquery plugin

$(window).load(function() {
    var options =
    {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'avatar.png'
    }
    var cropper = $('.imageBox').cropbox(options);
    $('#file').on('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);
        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
    })
    $('#btnCrop').on('click', function(){
        var img = cropper.getDataURL()
        $('.cropped').append('<img src="'+img+'">');
    })
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
});

// use with require js (new feature added on 9 Oct 2014)
require.config({
    baseUrl: "../",
    paths: {
        jquery: 'jquery-1.11.1.min',
        cropbox: 'cropbox'
    }
});
require( ["jquery", "cropbox"], function($) {
    var options =
    {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'avatar.png'
    }
    var cropper = $('.imageBox').cropbox(options);
    $('#file').on('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);
        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
    })
    $('#btnCrop').on('click', function(){
        var img = cropper.getDataURL();
        $('.cropped').append('<img src="'+img+'">');
    })
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
    }
);

Demo

YUI plugin

YUI().use('node', 'crop-box', function(Y){
    var options =
    {
        imageBox: '.imageBox',
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'avatar.png'
    }
    var cropper = new Y.cropbox(options);
    Y.one('#file').on('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = new Y.cropbox(options);
        }
        reader.readAsDataURL(this.get('files')._nodes[0]);
        this.get('files')._nodes = [];
    })
    Y.one('#btnCrop').on('click', function(){
        var img = cropper.getDataURL()
        Y.one('.cropped').append('<img src="'+img+'">');
    })
    Y.one('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    Y.one('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
})

Demo