H5调用手机摄像头和相册
作者：互联网
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
7 </head>
8 <body>
9 <h2 class="title-detail">
10 图片描述
11 </h2>
12 <input type="hidden" id="picIndex" value="0">
13 <div id='image-list' class="row image-list">
14 <!-- <input id="upload_image" type="file" name="image" accept="image/*" /> -->
15
16 </div>
17 <div class="image-item space" onclick="showActionSheet()">
18 <button class="image-up">拍照</button>
19 </div>
20
21 </body>
22 <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
23 <script type="text/javascript">
24 //图片显示
25 function showPics(url, name) {
26 //根据路径读取到文件
27 plus.io.resolveLocalFileSystemURL(url, function(entry) {
28 entry.file(function(file) {
29 var fileReader = new plus.io.FileReader();
30 fileReader.readAsDataURL(file);
31 fileReader.onloadend = function(e) {
32 var picUrl = e.target.result.toString();
33 var picIndex = $("#picIndex").val();
34 var nowIndex = parseInt(picIndex) + 1;
35 $("#picIndex").val(nowIndex);
36 var html = '';
37 html += '<div class="image-item " id="item' + nowIndex + '">';
38 html += '<div class="image-close" onclick="delPic(this)">X</div>';
39 html += '<div><img src="' + picUrl + '" class="upload_img" style="width:100%;height:100%;"/></div>';
40 html += '</div>';
41 html += $("#image-list").html();
42 $("#image-list").html(html);
43 console.log(html)
44 }
45 });
46 });
47 }
48 //压缩图片
49 function compressImage(url, filename) {
50 var name = "_doc/upload/" + filename;
51 plus.zip.compressImage({
52 src: url, //src: (String 类型 )压缩转换原始图片的路径
53 dst: name, //压缩转换目标图片的路径
54 quality: 40, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100
55 overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件
56 },
57 function(zip) {
58 //页面显示图片
59 showPics(zip.target, name);
60 },
61 function(error) {
62 plus.nativeUI.toast("压缩图片失败，请稍候再试");
63 });
64 }
65
66 //调用手机摄像头并拍照
67 function getImage() {
68 var cmr = plus.camera.getCamera();
69 cmr.captureImage(function(p) {
70 plus.io.resolveLocalFileSystemURL(p, function(entry) {
71 compressImage(entry.toLocalURL(), entry.name);
72 }, function(e) {
73 plus.nativeUI.toast("读取拍照文件错误：" + e.message);
74 });
75 }, function(e) {}, {
76 filter: 'image'
77 });
78 }
79 //从相册选择照片
80 function galleryImgs() {
81 plus.gallery.pick(function(e) {
82 var name = e.substr(e.lastIndexOf('/') + 1);
83 compressImage(e, name);
84 }, function(e) {}, {
85 filter: "image"
86 });
87 }
88
89 // 删除照片
90 function delPic(a) {
91 $(a).next().remove();
92 $(a).remove()
93 }
94
95 //点击事件，弹出选择摄像头和相册的选项
96 function showActionSheet() {
97 var bts = [{
98 title: "拍照"
99 }, {
100 title: "从相册选择"
101 }];
102 plus.nativeUI.actionSheet({
103 cancel: "取消",
104 buttons: bts
105 },
106 function(e) {
107 if (e.index == 1) {
108 getImage();
109 } else if (e.index == 2) {
110 galleryImgs();
111 }
112 }
113 );
114 }
115 </script>
116 </html>
标签：function,name,相册,H5,html,plus,var,entry,摄像头 来源： https://www.cnblogs.com/lgx5/p/15943927.html