image resize

image resize using jquery and php

by santosh_patnala

HTML

<div class="container">
    <div class="props">
        <form id="dimensions">
            <div class="controlers"> <span>Width: </span>

                <input type="text" id="imgWidth" name="imgWidth" class="txtElements" title="Enter Width" value="123" />
            </div>
            <div class="controlers"> <span>Height: </span>

                <input type="text" id="imgHeight" name="imgHeight" class="txtElements" title="Enter Height" value="123" />
            </div>
        </form>
    </div>
    <div class="action">
        <form id="formFileInput">
            <div style="width: 56%; float: left;">
                <input type="file" id="file" name="file" title="Select Image File" style="float: left; width: 100%;">
            </div>
        </form>
        <div class="imageBox">
            <!--onclick="$('input[type=file]').click()"-->
            <div class="thumbBox"></div>
        </div>
    </div>
    <div class="cropped"></div>
    <div class="spinner" style="display: none">
        <img src="loading.gif" />
    </div>
</div>
    
    <?php 
if ( isset($_REQUEST["image"]) && !empty($_REQUEST["image"]) ) { 

    // get the image data
    $data = $_REQUEST['image'];

    // remove the prefix
    $uri =  substr($data,strpos($data,","));

    // create a filename for the new image
    $file = md5(uniqid()) . '.png';

    // decode the image data and save it to file
    file_put_contents($file, base64_decode($uri));

    // return the filename
    echo $file;
}
?>

CSS

.container {
    margin: 0 auto;
    width: 36%;
}
.action {
    width: 500px;
    height: 30px;
    margin: 10px 0;
}
.cropped {
    /*display:none;*/
    clear: both;
    margin-top: 25px;
    border: 1px solid;
}
.cropped > a {
    margin-right: 10px;
}
.imageBox {
    /*display:none;*/
    position: relative;
    /*height: 500px;
            width: 500px;*/
    border: 1px solid #aaa;
    background: #fff;
    overflow: hidden;
    background-repeat: no-repeat;
    cursor: move;
}
.imageBox .thumbBox {
    position: absolute;
    /*top: 50%;
                left: 50%;*/
    /*width: 200px;
                height: 200px;
                margin-top: -100px;
                margin-left: -100px;*/
    box-sizing: border-box;
    /*border: 1px solid rgb(102, 102, 102);*/
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
    background: none repeat scroll 0% 0% transparent;
}
.spinner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 400px;
    background: rgba(0, 0, 0, 0.7);
}
.props {
    height: 30px;
    margin: 10px 0;
    width: 500px;
}
.txtElements {
    padding: 3px 6px;
}
.controlers {
    float: left;
    width: 32%;
}
.props > form {
    float: left;
    margin-bottom: 15px;
    width: 100%;
}

JavaScript

$(window).load(function () {
    $(".downloadImg").hide();
    var options = {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'avatar.png'
    };
    var cropper;
    $('#file').on('change', function () {
        //$(".spinner").show();
        var img;
        var reader = new FileReader();
        reader.onload = function (e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);
            img = cropper.getAvatar();
            $('.cropped').html('<img src="' + img + '" />');

            $.ajax({
                type: "POST",
                url: "index.php",
                data: {
                    image: img
                }
            });
            //$(".spinner").hide();
        };
        reader.readAsDataURL(this.files[0]);
        this.files = [];

        /*if ($("#file").val() == "" || $("#file").val() == null) {
                    $("#formFileInput").valid();
                    return false;
                } else {
                    return true;
                }*/


    });
});



$(document).ready(function () {
    var imgWidth = $("#imgWidth").val(), //document.getElementById("imgWidth").value
        imgHeight = $("#imgHeight").val(); //document.getElementById("imgHeight").value;
    $(".thumbBox,.imageBox").css({
        width: imgWidth,
        height: imgHeight,
        //marginLeft: -(imgWidth / 2),
        //marginTop: -(imgHeight / 2)
        'background-size': imgWidth + 'px ' + imgHeight + 'px'
    });
    //$(".thumbBox,.imageBox,");


});









var cropbox = function (options, el) {
    var el = el || $(options.imageBox),
        obj = {
            state: {},
            ratio: 1,
            options: options,
            imageBox: el,
            thumbBox: el.find(options.thumbBox),
            spinner: el.find(options.spinner),
            image: new Image(),
            getAvatar: function () {
                var imgWidth =...