CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Devasish
Devasish

Reputation: 41

Reducing image size in javascript without reducing the picture quality and download the image

Hi friends i am reduce the image using javascript but losing its quality. Please help me for same picture quality with reduce the image size. The below is my code please help me.

I am upload a image using input file. for multiple file also you have to upload while uploading the images, the images are reduce the size but quality is lossing so please help me... I am suffering from this problem from 2 days...

html code

<div class="row">
        <label for="fileToUpload">Select Files to Upload</label><br />
        <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
        <output id="filesInfo"></output>
    </div>
    <div class="row">
        <input type="submit" value="Upload" />
    </div>

javascript:

<script>

    if (window.File && window.FileReader && window.FileList && window.Blob) {
        document.getElementById('filesToUpload').onchange = function () {
            var files = document.getElementById('filesToUpload').files;
            for (var i = 0; i < files.length; i++) {
                resizeAndUpload(files[i]);
            }
        };
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }

    function resizeAndUpload(file) {
        var reader = new FileReader();
        reader.onloadend = function () {

            var tempImg = new Image();
            tempImg.src = reader.result;
            tempImg.onload = function () {

                var MAX_WIDTH = 400;
                var MAX_HEIGHT = 300;
                var tempW = tempImg.width;
                var tempH = tempImg.height;
                if (tempW > tempH) {
                    if (tempW > MAX_WIDTH) {
                        tempH *= MAX_WIDTH / tempW;
                        tempW = MAX_WIDTH;
                    }
                } else {
                    if (tempH > MAX_HEIGHT) {
                        tempW *= MAX_HEIGHT / tempH;
                        tempH = MAX_HEIGHT;
                    }
                }

                var canvas = document.createElement('canvas');
                canvas.width = tempW;
                canvas.height = tempH;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0, tempW, tempH);
                var dataURL = canvas.toDataURL("image/jpeg");

                var div = document.createElement('div');
                div.innerHTML = '<img  src="' + dataURL + '" />';

                document.getElementById('filesInfo').appendChild(div);
            }

        }
        reader.readAsDataURL(file);
    }
</script>

Upvotes: 2

Views: 2941

Answers (1)

Matthias
Matthias

Reputation: 2775

There are some ways to do that that keep the same dimensions of the image while doing a better job at compressing without sacrificing visual quality. I've been looking into the subject as well - there's a couple of companys that are providing commercial (and server-side) solutions for it, such as kraken.io or jpegmini.com. The results are 60% smaller file sizes but look almost the same.

Natually, they don't describe what they are doing, but I would assume that they're going very much to the internals of the jpeg compression to archieve these results.

If you want to make any progress in that field, this will probably require you to deeply understand the jpeg compression algorithm and not rely on the standard javascript jpeg compression library.

Upvotes: 1

Related Questions