[tvixa]

Добрый вечер, форумчане. У меня возникла проблема, есть drag`n`drop загрузчик изображений. Нужна функция, сжимающая изображение при загрузке до размеров 760*300 px.
Использовала canvas, но что-то не работает, помогите пожалуйста разобраться
в блоке source_image - загружаемое, в блоке result_image полученное.
(уже припилена функция уменьшения размера)

$(function() {
    var output_format = "jpg";
    /** DRAG AND DROP STUFF WITH FILE API **/
    var holder = document.getElementById('holder');
    holder.ondragover = function() {
        this.className = 'is_hover';
        $('#result_image').hide();
        return false;
    };
    holder.ondragend = function() {
        this.className = '';
        return false;
    };
    holder.ondrop = function(e) {
        this.className = '';
        e.preventDefault();
        
        $('#div-img-setup').css('display','block');
        $('#source_image').css('display','block');

        var file = e.dataTransfer.files[0],
        reader = new FileReader();
        var name=file.name;
        reader.onload = function(event) {
            var i = document.getElementById("source_image");
           	var j = document.getElementById("result_image");
            i.src = event.target.result;
            j.src = event.target.result;
            i.onload = function() {
           	 		resize(i);
                function resize(image){
                    var width= 765;
                    var height=300;
                    var imgWidth=image.width;
                    var imgHeight=image.height;
                    var ratioW=width/imgWidth;
                    var ratioH=height/imgHeight;
                    var ratio=Math.min(ratioW,ratioH);
                    width=imgWidth*ratio;
                    height=imgHeight*ratio;
                    width=Math.round(width);
                    height=Math.round(height);
                    var canvas = document.createElement('canvas');
                    canvas.width = width;
                    canvas.height = height;
                    if(imgWidth/2>width && imgHeight/2>height){
                        var canvasTemp = document.createElement('canvas');
                        canvasTemp.width = imgWidth/2;
                        canvasTemp.height = imgHeight/2;
                        canvasTemp.getContext('2d').drawImage(image, 0, 0, imgWidth/2, imgHeight/2);
                        imgWidth=imgWidth/2;
                        imtHeight=imgHeight/2;
                        while(imgWidth/2>width && imgHeight/2>height){
                            var canvas2 = document.createElement('canvas');
                            canvas2.width = imgWidth/2;
                            canvas2.height = imgHeight/2;
                            canvas2.getContext('2d').drawImage(canvasTemp, 0, 0, imgWidth/2, imgHeight/2);
                            imgWidth=imgWidth/2;
                            imtHeight=imgHeight/2;
                            canvasTemp=canvas2;
                        }
                        canvas.getContext('2d').drawImage(canvasTemp, 0, 0, width, height);
                    } else {
                        canvas.getContext('2d').drawImage(image, 0, 0, width, height);
                    }
                }
           	 }
        };
        if(file.type=="image/png"){
            output_format = "png";
        }
        reader.readAsDataURL(file);
        return false;
    };
});