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

Question

这应该很容易，但我找不到答案。我需要通过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 MacDonald或Shazron，但我没有。

Answer 1

这里做一个妥善的解决办法。

将此函数传递给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.") 
     }) 
    }) 
} 

Answer 2

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

如果你真的需要通过JS来获得这些尺寸，你可以

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

你还可以用IMG

Answer 3

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

Answer 4

你可以这样做的一种方法是使用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); 
}); 

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

Answer 5

下面的代码解决了我今天同样的问题（在iOS上测试）：

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

希望它能帮助！