Javascript Client Side JPEG image compression

Question

I want to basically compress images uploaded (client-side) and then attach the src to my id (of html). The code of the function is as below:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            console.log("e.target.result",e.target.result);
            var imageEle = new Image();
            imageEle.src = e.target.result;
            imageEle.onload = function() {
                var cvs = document.createElement('canvas');
                cvs.width = imageEle.naturalWidth;
                cvs.height = imageEle.naturalHeight;
                var ctx = cvs.getContext("2d").drawImage(imageEle,0,0);
                var newImageData = cvs.toDataURL('image/jpeg',0.5);
                $('#uploadedImage').attr('src', newImageData);
            };
        };
        reader.readAsDataURL(input.files[0]);
    }
}

This should work fine, but what happens is the uploaded image after process appears to be a black box. Now I have read alot of similar questions, but in relation to compression I am not able to fix this issue. Also this works good with files (jpeg images) less than 500 Kb, but for real files that are 1 MB plus it gives a black box as data uri. It would be awesome if somebody could help me with this.

Thanks, Vaibhav

score 0 · Answer 1 · edited May 23 '17 at 12:09

0

There's a size limit to toDataURL use, see canvas.toDataURL() for large canvas for a similar question, and possible answers with server-side code.

If you're restricted to this client-side code, you'll have to reduce the size of the image before using toDataURL.

edited May 23 '17 at 12:09

Community

1
1

answered Jan 24 '16 at 13:25

Ilya

5,377
2
18
33

How to reduce the size of image at client size before toDataUrl? – Vaibhav Magon Jan 24 '16 at 13:34
If you give a size to `drawImage`, I think it will reduce it to that size. – Ilya Jan 24 '16 at 13:38
But then the canvas will be small and image size would be affected. Will it not? – Vaibhav Magon Jan 24 '16 at 13:38
Yes, but that's the goal, it you need to use `toDataURL`. – Ilya Jan 24 '16 at 13:40
Nope the goal is just to reduce the quality for me here. I am able to achieve it for smaller files, just not for larger ones. – Vaibhav Magon Jan 24 '16 at 13:40
Well, reducing size is reducing quality. If you want to keep the display size constant, you can use the `zoom` function of the canvas. – Ilya Jan 24 '16 at 13:44
@Vaibhav is that what you were looking for (`zoom`) ? One thing I forgot to mention is that you shoudn't use naturalWidth/naturalHeight anyway, but a target (max) size of your canvas, and use the third and fourth param of `drawImage` to fit the image. – Ilya Jan 25 '16 at 12:37
No Zoom would not help. I am still looking for a better fix. – Vaibhav Magon Jan 27 '16 at 06:34
Could you explain what it is you want to achieve exactly ? If you have a fixed size canvas (not too big), you don't necessarily have to zoom, just to constrain the image to the canvas. – Ilya Jan 27 '16 at 09:34

Javascript Client Side JPEG image compression

1 Answers1