可以使用PhoneGap获取照片库内容

我想获取设备的库照片，以便在我的应用程序库中显示它们与Phonegap/cordova。是否可以在不通过camera.getPicture的情况下访问？我确实想过使用phonegap的文件系统API，但他们没有帮助我。

您可以使用相机科尔多瓦插件。

https://github.com/apache/cordova-plugin-camera

示例代码

.HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="telephone=no" name="format-detection">
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta content=
    "user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
    name="viewport">
    <script src="cordova.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
    <title>Camera Cordova Plugin</title>
</head>
<body>
    <button onclick="capturePhoto();">Capture Photo</button><br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
    Library</button><br>
    <img id="image" src="" style="display:none;width:100%;">
</body>
</html>

JavaScript

var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageURI) {
// Uncomment to view the base64-encoded image data
console.log(imageURI);
// Get image handle
//
var cameraImage = document.getElementById('image');
// Unhide image elements
//
cameraImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
cameraImage.src = imageURI;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
console.log(imageURI);
// Get image handle
//
var galleryImage = document.getElementById('image');
// Unhide image elements
//
galleryImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
galleryImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 30,
targetWidth: 600,
targetHeight: 600,
destinationType: destinationType.FILE_URI,
saveToPhotoAlbum: true
});
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality: 30,
targetWidth: 600,
targetHeight: 600,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
// Called if something bad happens.
//
function onFail(message) {
//alert('Failed because: ' + message);
}

参考：

http://blog.revivalx.com/2014/05/03/tutorial-camera-cordova-plugin-for-ios-and-android/

我正在研究 cordova-plugin-photo-library 插件，它提供了跨平台的方式来枚举设备上的所有照片。

用法：

cordova.plugins.photoLibrary.getLibrary(function (library) {
    // Here we have the library as array
    cordova.plugins.photoLibrary.getThumbnailUrl(library[0],
        function (thumbnailUrl) { image.src = thumbnailUrl; },
        function (err) { console.log('Error occured'); },
        {
            thumbnailWidth: 512,
            thumbnailHeight: 384,
            quality: 0.8
        });
    });

相关内容

最新更新

热门标签：