在上传之前从Phonegap获取图像宽度和高度

时间:2013-02-28 02:59:46

标签: javascript html5 cordova

这应该很容易,但我找不到答案。我需要获取图像的宽度和高度,通过Phonegap中的fileURI抓取,然后再将其上传到我们的服务器。当然,在上传之前必须有一些html5 / Phonegap魔术。这里有一些非常简化的代码来显示我所处的位置:

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)

知道遗失的是什么吗?我希望我在快速拨号上有Simon MacDonaldShazron,但我没有。

5 个答案:

答案 0 :(得分:7)

这是一个合适的解决方案。

将此功能传递给imageURI。从两个PhoneGap的getPicture()方法返回URI。

像这样: 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.")
        })
    })
}

答案 1 :(得分:3)

以下代码为我解决了同样的问题(在iOS上测试):

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

希望它有所帮助!

答案 2 :(得分:1)

我认为你可以使用getPicture()的目标宽度和高度来限制最大尺寸。 如果您需要将它们发送到服务器,我认为服务器代码将有助于获得这些维度。

如果你真的需要通过js获得这些维度,你可以

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

你可以用img

来做

答案 3 :(得分:0)

1.Phonegap提供了一种特定所选图像大小的方法 Click here to see the options

2.如果您需要知道原始尺寸并且不想具体,可以尝试以下代码:

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
                });
    })
}

答案 4 :(得分:0)

您可以通过使用Capture API中的MediaFile来实现此目的。

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

应该比当前接受的解决方案少得多的代码。