0

Im resizing the image size to make it smaller im taking 20% of the height and 20% of the width. but im getting wrong result is getting me a higher size of an image.

 function imageToDataUri(img, width, height) {
        var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
            canvas.width = width;
            canvas.height = height;     
        ctx.drawImage(img, 0, 0, width, height);
        return canvas.toDataURL();
 }


imageToAdjust =  'data:image/png;base64,' + window.btoa(e.target.result);
        var img = new Image;
            img.onload = resizeImage;
            img.src = imageToAdjust;

function resizeImage() {
            console.log(img.width);
            console.log(img.height);
        var x = img.width - (0.2 * img.width);
        var y = img.height - (0.2 * img.height);
            console.log(x);
            console.log(y); 
        var newDataUri = imageToDataUri(this, x, y);
            console.log(newDataUri);
        var base64 = newDataUri.match(/data:(.+);base64,(.+)/);
            console.log('after resizing');
            console.log(base64);
        var base64Number = Math.round((base64[2].length )*3/4) ;
            console.log(base64Number);
}

what im getting through console.logs is for example i have image with size is 5663096 width 4032 and height 3024 then after i take 20% off im getting it width 3225.6 and height 2419.2 which is correct. but after i call imageToDataUri(this, x, y); function the image size will be 12031242 which is double. it should be smaller than 5663096

Amer Bearat
  • 876
  • 2
  • 7
  • 25
  • 2
    You seem to be under the impression, that reduced image dimensions would also automatically have to mean “smaller file size”. Of course that isn’t a general truth; encoding algorithms, how many “passes” compression algorithms are allowed to make, etc. pp. might differ between applications (such as the [presumably?] image editor your original image was saved with, and your browser.) – CBroe Apr 12 '18 at 08:03
  • 1
    Was for lossy image formats (which doesn't seem to be your case) but might still interest you: https://stackoverflow.com/questions/48632459/downsizing-image-dimensions-via-pure-js-leads-to-image-size-inflation-in-bytes/48634519#48634519 Also, for lossless, apart from compression, resizing might mean antialiasing artifacts => more color info => pako not happy. – Kaiido Apr 12 '18 at 12:02

0 Answers0