Cordova - 使用Cordova开发iOS应用实战5(获取手机里照片,并编辑)
2016-04-21 09:07 Komici 阅读(1245) 评论(0) 编辑 收藏 举报使用Cordova可以很方便的通过js代码读取系统相簿里面的照片,同使用设备摄像头拍照一样,同样需要先添加camera插件。
可以看到camera相机插件已经成功添加了:
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1148.html
一,添加camera插件
首先我们要在“终端”中进入工程所在的目录,然后运行如下命令:
1
|
cordova plugin add cordova-plugin-camera |
二,获取照片
我们可以选择是从“照片库(时刻)”中读取图片,或者从“相簿”中读取图片。
1,从“相簿”中获取照片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html> <html> <head> <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" > var pictureSource; var destinationType; document.addEventListener( "deviceready" ,onDeviceReady, false ); //Cordova加载完成会触发 function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } //获取照片 function getPhoto(source) { //quality : 图像的质量,范围是[0,100] navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } //获取照片成功 function onPhotoURISuccess(imageURI) { //打印出照片路径 console.log(imageURI); var largeImage = document.getElementById( 'largeImage' ); largeImage.style.display = 'block' ; largeImage.src = imageURI; } //获取照片是吧 function onFail(message) { alert( '获取失败: ' + message); } </script> </head> <body style= "padding-top:50px" > <button style= "font-size:23px;" onclick= "getPhoto(pictureSource.PHOTOLIBRARY);" > 从“相簿”中获取照片 </button> <br> <img style= "display:none;" id= "largeImage" src= "" /> </body> </html> |
2,从“照片库(时刻)”中获取照片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html> <html> <head> <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" > var pictureSource; var destinationType; document.addEventListener( "deviceready" ,onDeviceReady, false ); //Cordova加载完成会触发 function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } //获取照片 function getPhoto(source) { //quality : 图像的质量,范围是[0,100] navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } //获取照片成功 function onPhotoURISuccess(imageURI) { //打印出照片路径 console.log(imageURI); var largeImage = document.getElementById( 'largeImage' ); largeImage.style.display = 'block' ; largeImage.src = imageURI; } //获取照片是吧 function onFail(message) { alert( '获取失败: ' + message); } </script> </head> <body style= "padding-top:50px" > <button style= "font-size:23px;" onclick= "getPhoto(pictureSource.SAVEDPHOTOALBUM);" > 从“时刻”中获取照片 </button> <br> <img style= "display:none;" id= "largeImage" src= "" /> </body> </html> |
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1148.html