Javascript 使用PhoneGap从设备的图像库中选择多张照片
我能够基于PhoneGap文档中的camera.getPicture完整示例构建一个测试应用程序。它允许我拍摄一张照片或从图库中检索一张照片并将其放在div中 但是,我希望能够从图库中选择多个图像,并将每个图像放在自己的div中。有人能为我指出正确的方向来学习如何实现这一点吗 谢谢 下面是我正在使用的javascript:Javascript 使用PhoneGap从设备的图像库中选择多张照片,javascript,android,cordova,gallery,Javascript,Android,Cordova,Gallery,我能够基于PhoneGap文档中的camera.getPicture完整示例构建一个测试应用程序。它允许我拍摄一张照片或从图库中检索一张照片并将其放在div中 但是,我希望能够从图库中选择多个图像,并将每个图像放在自己的div中。有人能为我指出正确的方向来学习如何实现这一点吗 谢谢 下面是我正在使用的javascript: var pictureSource; // picture source var destinationType; // sets the format of retur
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);
您需要在每次拍照后动态创建div。 您的成功回调如下所示:
function onPhotoDataSuccess(imageData) {
// the following is all one line.
document.getElementById("photos").innerHTML+=
"<div>\
<img src=\"data:image/jpeg;base64,"+imageData+"\">\
</div>";
}
从Phonegap 3.5开始,不支持同时选择多个图像。您将需要编写或找到一个插件,该插件将与本机代码一起工作,以使您能够做到这一点。以下是Phonegap发展计划中描述的问题 我也在做这件事。这里是一个Android解决方案的链接
我也在寻找同样的答案——你有没有碰巧发现这一点?
#photos > div {
width: 100px;
margin:10px;
float:left;
}