brunobar79 / J-I-C

J I C is a Javascript Image Compressor using HTML5 Canvas & File API that allows you to compress your jpeg & png images before uploading to the server (100% client-side and no extra libraries required!)
http://makeitsolutions.com/labs/jic/
MIT License
857 stars 196 forks source link

Using JIC.js compress an image in python-flaks application #56

Open vinayakinnoctive opened 6 years ago

vinayakinnoctive commented 6 years ago

Hey , I am using JIC.js library for image compression and uploading it, I need to accept this compressed image into python code. Currently I am using request.files['imgInp'] to accept input. How can i get compressed image?

This is my javascript code

     function readURL(input) {
        if (input.files && input.files[0]) {
        var output_format = "jpg";
        var file = input.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");
            }             
        };     
        if(file.type=="image/png"){
            output_format = "png";
        }
        console.log("Filename:" + file.name);
        console.log("Filesize:" + (parseInt(file.size) / 1024) + " Kb");
        console.log("Type:" + file.type);         
        reader.readAsDataURL(file);

        ///////////////////////////////////////////////////////////////////////////////////////
        var result_image = document.getElementById('result_image');
        var source_image = document.getElementById('source_image');
        if (source_image.src == "") {
            alert("You must load an image first!");
            return false;
        }
        console.log("process start...");
        result_image.src = jic.compress(source_image,30,output_format).src;
        result_image.onload = function(){
            var image_width=$(result_image).width(),
            image_height=$(result_image).height();                 
            if(image_width > image_height){
                result_image.style.width="320px";
            }else{  
                result_image.style.height="300px";
            }
           result_image.style.display = "block";
        }
        console.log("process finished...");         
    }        

};

This is my html code

your image

This is python code

@app.route('/updateuser',methods=['GET','POST']) def updateuser(): file = request.files['imgInp']