Using the Cordova can be very convenient to read the system album through the JS code photos, as with the use of camera cameras, the same need to add the camera plug-in first.
one, add camera pluginFirst we enter the directory where the project is located in the terminal, and then run the following command:
| 1 |
cordova plugin add cordova-plugin-camera |
You can see that the camera plugin has been successfully added:
two, get photosWe can choose to read the picture from the Photo gallery (moment) or from the album.1. Get photos from "albums"
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
<!DOCTYPE html> <title>Capture Photo</title> <meta http-equiv="Content-type"content="text/html; charset=utf-8"> <script type="text/javascript"charset="utf-8"src="cordova.js"></script> <script type="text/javascript"charset="utf-8"> varpictureSource; vardestinationType; document.addEventListener("deviceready",onDeviceReady,false); //Cordova加载完成会触发 functiononDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } //获取照片 functiongetPhoto(source) { //quality : 图像的质量，范围是[0,100] navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } //获取照片成功 functiononPhotoURISuccess(imageURI) { //打印出照片路径 console.log(imageURI); varlargeImage = document.getElementById(‘largeImage‘); largeImage.style.display = ‘block‘; largeImage.src = imageURI; } //获取照片是吧 functiononFail(message) { alert(‘获取失败: ‘+ message); } </script> <body style="padding-top:50px"> <button style="font-size:23px;"onclick="getPhoto(pictureSource.PHOTOLIBRARY);"> 从“相簿”中获取照片 </button> <br> "display:none;"id="largeImage"src=""/> </body> |
2. Get Photos from Photo gallery (moments)
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
<!DOCTYPE html> <title>Capture Photo</title> <meta http-equiv="Content-type"content="text/html; charset=utf-8"> <script type="text/javascript"charset="utf-8"src="cordova.js"></script> <script type="text/javascript"charset="utf-8"> varpictureSource; vardestinationType; document.addEventListener("deviceready",onDeviceReady,false); //Cordova加载完成会触发 functiononDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } //获取照片 functiongetPhoto(source) { //quality : 图像的质量，范围是[0,100] navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } //获取照片成功 functiononPhotoURISuccess(imageURI) { //打印出照片路径 console.log(imageURI); varlargeImage = document.getElementById(‘largeImage‘); largeImage.style.display = ‘block‘; largeImage.src = imageURI; } //获取照片是吧 functiononFail(message) { alert(‘获取失败: ‘+ message); } </script> <body style="padding-top:50px"> <button style="font-size:23px;"onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);"> 从“时刻”中获取照片 </button> <br> "display:none;"id="largeImage"src=""/> </body> |
Original from: www.hangge.com reprint please keep the original link: http://www.hangge.com/blog/cache/detail_1148.html
Cordova-developing iOS apps with Cordova 5 (Get photos on your phone and edit them)
