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="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>