CODEWITHSUNDEEP
javascripthtmlcordova
Ryan Martin
Ryan Martin

Reputation: 1693

Getting an image width and height from Phonegap before upload

This should be easy but I can't find the answer. I need to get the width and height of an image, grabbed via a fileURI in Phonegap, before uploading it to our server. Certainly there's got to be some html5 / Phonegap magic that will do this before uploading. Here is some really reduced code to show where I'm at: 

function got_image(image_uri) {
    // Great, we've got the URI
    window.resolveLocalFileSystemURI(image_uri, function(fileEntry) {
        // Great, now we have a fileEntry object.
        // How do we get the image width and height?
    })
}

// Get the image URI using Phonegap
navigator.camera.getPicture(got_image, fail_function, some_settings)

Any idea what the missing piece is? I wish I had Simon MacDonald or Shazron on speed dial, but I do not.

Upvotes: 7

Views: 8908

Answers (5)

Ryan Martin
Ryan Martin

Reputation: 1693

Here is a proper solution.

Pass this function an imageURI. URIs are returned from both of PhoneGap's getPicture() methods.

Like this: get_image_size_from_URI(imageURI) 

function get_image_size_from_URI(imageURI) {
    // This function is called once an imageURI is rerturned from PhoneGap's camera or gallery function
    window.resolveLocalFileSystemURI(imageURI, function(fileEntry) {
        fileEntry.file(function(fileObject){
            // Create a reader to read the file
            var reader = new FileReader()

            // Create a function to process the file once it's read
            reader.onloadend = function(evt) {
                // Create an image element that we will load the data into
                var image = new Image()
                image.onload = function(evt) {
                    // The image has been loaded and the data is ready
                    var image_width = this.width
                    var image_height = this.height
                    console.log("IMAGE HEIGHT: " + image_height)
                    console.log("IMAGE WIDTH: " + image_width)
                    // We don't need the image element anymore. Get rid of it.
                    image = null
                }
                // Load the read data into the image source. It's base64 data
                image.src = evt.target.result
            }
            // Read from disk the data as base64
            reader.readAsDataURL(fileObject)
        }, function(){
            console.log("There was an error reading or processing this file.")
        })
    })
}

Upvotes: 8

conca
conca

Reputation: 1434

The following code solves the same problem for me today (tested on iOS):

function got_image(image_uri)
{       
    $('<img src="'+image_uri+'"/>').on('load',function(){
        alert(this.naturalWidth +" "+ this.naturalHeight);
    });
}

Hope it helps!

Upvotes: 3

Simon MacDonald
Simon MacDonald

Reputation: 23273

one way you can do this is by using the MediaFile from the Capture API.

var mediaFile = new MediaFile("myfile.jpg", "/path/to/myfile.jpg");
mediaFile.getFormatData(function(data) {
    console.log("width: " data.width);
    console.log("height: " data.height);
});

Should be a lot less code than the current accepted solution.

Upvotes: 0

Jack He
Jack He

Reputation: 1693

1.Phonegap supply a way to specific the size of the image you choose Click here to see the options

2.If you need to know the original size and do not want to specific, you may try the code below:

function got_image(image_uri) {
    window.resolveLocalFileSystemURI(image_uri, function(fileEntry) {
       fileEntry.file(function (fileObj) {
                    var fileName = fileObj.fullPath;
                    var originalLogo = new Image();
                    originalLogo.src =fileName;
                    //get the size by: originalLogo.width,originalLogo.height
                });
    })
}

Upvotes: 0

Horst
Horst

Reputation: 1739

I think you can use target width and height of getPicture() to limit the maximum dimension. If you need to send them to server, I think server code would help to get those dimension.

If you really need to get those dimension by js, you can

var img = new Image;
img.onload = function(){
  myCanvasContext.drawImage(img,0,0);
};
img.src = "data:YOUR_BASE64_DATA";

And you can do it with img

Upvotes: 1

Related Questions