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>
分类:
H5
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2021-02-27 C# 打印PDF文档的10种方法
2019-02-27 Func与Action
2019-02-27 JavaScript编码规范