CropBox, corta imágenes y adjuntalas a tu servidor

CropBox, corta imágenes y adjuntalas a tu servidor, con este plugin puedes subir imágenes de un avatar al servidor, este plugin es esta realizado para JavaScript, jQuery, YUI y proporciona de manera ligera y fácil el recorte de un imagen para la generación de imágenes más pequeñas, sin duda arregla el problema que existe cuando se carga directamente la imagen al servidor y el se encarga de realizar el recorte, el soporte que tiene es sin duda muy bueno por que nos proporciona la manera de trabajar directamente con la url o con el archivo en formato binario getAvatar, getBlobFile.

La solucion te la puedes encontrar en JAVASCRIPT puro

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.getAvatar()
        document.querySelector('.cropped').innerHTML += '<img src="'+img+'">';
    })
    document.querySelector('#btnZoomIn').addEventListener('click', function(){
        cropper.zoomIn();
    })
    document.querySelector('#btnZoomOut').addEventListener('click', function(){
        cropper.zoomOut();
    })
};

Con la ayuda de JQUERY

$(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.getAvatar()
        $('.cropped').append('<img src="'+img+'">');
    })
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
});

El uso con 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.getAvatar()
        Y.one('.cropped').append('<img src="'+img+'">');
    })
    Y.one('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    Y.one('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
})

Puedes encontrarte las demostraciones en los siguientes enlaces:

Javascript puro: http://cssdeck.com/labs/xnmcokhc
jQuery:http://cssdeck.com/labs/t8bdodvj
YUI plugin: http://cssdeck.com/labs/kugvd9kp

You may also like...