https://github.com/hongkhanh/cropbox

A lightweight and simple JavaScript, Jquery, YUI plugin to crop your avatar
https://github.com/hongkhanh/cropbox

Last synced: 18 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/hongkhanh/cropbox
• Owner: hongkhanh
• License: mit
• Created: 2014-09-14T03:16:41.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-06-15T10:26:07.000Z (over 6 years ago)
• Last Synced: 2024-10-08T21:36:29.060Z (about 1 month ago)
• Language: JavaScript
• Homepage: http://hongkhanh.github.io/cropbox/
• Size: 1.07 MB
• Stars: 266
• Watchers: 22
• Forks: 99
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
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](/screenshot.jpg)

# 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 += '';

        })

        document.querySelector('#btnZoomIn').addEventListener('click', function(){

            cropper.zoomIn();

        })

        document.querySelector('#btnZoomOut').addEventListener('click', function(){

            cropper.zoomOut();

        })

    };

[Demo](http://cssdeck.com/labs/xnmcokhc)

## 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('');

        })

        $('#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('');

        })

        $('#btnZoomIn').on('click', function(){

            cropper.zoomIn();

        })

        $('#btnZoomOut').on('click', function(){

            cropper.zoomOut();

        })

        }

    );

[Demo](http://cssdeck.com/labs/t8bdodvj)

## 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('');

        })

        Y.one('#btnZoomIn').on('click', function(){

            cropper.zoomIn();

        })

        Y.one('#btnZoomOut').on('click', function(){

            cropper.zoomOut();

        })

    })

[Demo](http://cssdeck.com/labs/kugvd9kp)