使用PhoneGap从设备图片库中选择多张照片

Selecting Multiple photos from a device's image gallery using PhoneGap

本文关键字：张照片 照片 选择 PhoneGap 图片库 使用      更新时间：2023-09-26

我能够基于相机构建一个测试应用程序。getPicture完整的例子在PhoneGap的文档。它允许我拍摄照片或从图库中检索照片并将其放置在div中。

然而，我希望能够从图库中选择多个图像，并将每个图像放在自己的div中。有人能指出我在正确的方向学习如何实现这一点吗?

谢谢。

这是我使用的javascript:

var pictureSource;   // picture source
var destinationType; // sets the format of returned value 
// Wait for PhoneGap to connect with the device
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
  var largeImage = document.getElementById('largeImage');
  largeImage.style.display = 'block';
  largeImage.src = "data:image/jpeg;base64," + imageData;
}

function onPhotoURISuccess(imageURI) {
  var largeImage = document.getElementById('largeImage');
  largeImage.style.display = 'block';
  largeImage.src = imageURI;
}
// A button will call this function
function capturePhoto() {
    //add new div
    var newPhoto = document.createElement("div");
    newPhoto.id = "div";        
    newPhoto.className ="photo";
    newPhoto.innerHTML = "<img id='largeImage' src='' />";
    document.getElementById("photos").appendChild(newPhoto);

  // Take picture using device camera and retrieve image as base64-encoded string
  navigator.camera.getPicture(onPhotoDataSuccess, onPhotoURISuccess, onFail, { quality: 50 });
}
// A button will call this function
function getPhoto(source) {
    //add new div

  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
    destinationType: destinationType.FILE_URI,
    sourceType: source });
}

// Called if something bad happens.
function onFail(message) {
  alert('Failed because: ' + message);

在Phonegap 3.5中不支持同时选择多个图像。您将需要编写或找到一个插件，将与本地代码一起工作，使您能够做到这一点。下面是Phonegap开发计划中描述的问题。https://issues.apache.org/jira/browse/cb - 1215

我也在做这件事。这是一个Android解决方案的链接。

http://webcache.googleusercontent.com/search?q=cache: http://www.technotalkative.com/android-select-multiple-photos-from-gallery/

您需要在每张照片拍摄后动态创建div。你的成功回调应该是这样的:

function onPhotoDataSuccess(imageData) {
    // the following is all one line.
    document.getElementById("photos").innerHTML+=
    "<div>'
         <img src='"data:image/jpeg;base64,"+imageData+"'">'
     </div>";
}

然后你可以通过CSS样式化所有的图片，比如

#photos > div {
    width: 100px;
    margin:10px;
    float:left;
}
相关文章：