JIC

<html>

<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="jic.js"></script>
</head>

<body>

    <div class="container">
        <div class="row">
            <div id="holder" style="border:1px solid #000; width:350px; height:300px; margin-top:30px;">
                <div id="holder_helper">
                    <h2 id="holder_helper_title">Drag & Drop your Image here!</h2>
                </div>
            <img id="source_image" class="img_container" style="height:300px;"/>
            </div>
        </div>
    </div>


<script>
(function(){
    // var holder = $('#holder');
    var holder = document.getElementById('holder');

    holder.ondragover = function() {
        this.className = 'is_hover';
        return false;
    };
    holder.ondragend = function() {
        this.className = '';
        return false;
    };
    holder.ondrop = function(e) {
        this.className = '';
        e.preventDefault();

        document.getElementById("holder_helper").removeChild(document.getElementById("holder_helper_title"));

        var file = e.dataTransfer.files[0],
        reader = new FileReader();
        reader.onload = function(event) {
            var i = document.getElementById("source_image");
                i.src = event.target.result;
                i.onload = function(){
                    image_width=$(i).width(),
                    image_height=$(i).height();

                    if(image_width > image_height){
                        i.style.width="320px";
                    }else{
                        i.style.height="300px";
                    }
                    i.style.display = "block";
                    console.log("Image loaded");

                }

        };

        reader.readAsDataURL(file);

        var uploadedImage = new Image();
        uploadedImage.src = $('#source_image').src;

        var compressed_url = jic.compress(uploadedImage,30,'jpg').src;
        console.log(compressed_url);

        return false;
    }

})()
</script>


</body>
</html>