0

I am trying to load an image into a canvas from a URL and then get the dataUrl and use this to find out the size of an image.

The result is that the image is shown to be a lot larger than it should be.

For example, loading in a 60kb image results in the decoded variable returning it to be 134kb.

When I run the same code on an image stored locally on my pc, getting the file object from a file input instead and the returned value is correct ( for example 60kb ).

This is the code that I am using:

            var canvas = document.getElementById('canvas');  
            var ctx = canvas.getContext('2d');  
            var img = '/anImage.jpg';
            var image = document.createElement('img'); 

            image.src = img;

            ctx.drawImage(image, 500, 500);  

            ctx.drawImage(image, img.width, img.height);

            var dataUrl =  canvas.toDataURL('image/jpeg');

            var d = dataUrl.substr(dataUrl.indexOf('base64,') + 7);
            var decoded = atob(d);

            var size = decoded.length;

I have tried using the dataUrl to output the image again and saving it... which still results in the image being 134kb and not the original size of 60Kb.

I understand that base64 encoding makes an image 1.37 or so times bigger but the value is correct when getting the image object from a file input.

I am not sure whether the compression level is being lost? Or whether I can somehow get this from the file object and then use it to set the second param for the toDataUrl() function?

I cannot find any information relating specifically to this online so any information would be appreciated :)

Lishamatish
  • 551
  • 2
  • 4
  • 18
  • Your code can never work. The first argument of the `drawImage` method has to be an image or another canvas element. Not a string. – Rob W Mar 15 '12 at 11:56
  • Sorry there should be a `document.createElement('img');` in there. Edited to amend :) – Lishamatish Mar 15 '12 at 14:37
  • You should run the `crawImage` methods in an `image.onload` event. It's possible that the image hasn't (fully) loaded yet. As a result, the painted image is incomplete. – Rob W Mar 15 '12 at 17:52
  • I have ammended code to do that and still the same! More detail and an example / better explaination here : http://stackoverflow.com/questions/9773154/canvas-todataurl-increases-file-size-of-image – Lishamatish Mar 19 '12 at 17:25

1 Answers1

0

To get size of an image in bytes you can do simple HEAD request to the image where it's hosted.

For example:

var xhr = new XMLHttpRequest();
xhr.open( 'HEAD', '/anImage.jpg', true );
xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 ) {
        if ( xhr.status == 200 ) {
            console.log( 'size: ' + xhr.getResponseHeader( 'Content-Length' ) );
        }
    }
};
xhr.send(null);
antyrat
  • 27,479
  • 9
  • 75
  • 76
  • Thank you that is very useful for grabbing the actual image size. My problem is that I am then manipulating the image and attempting to get the new image size from the canvas and therefore I am still stuck with the wrong value. – Lishamatish Mar 15 '12 at 14:42