H5调用手机摄像头和相册

最新推荐文章于 2024-08-03 22:32:10 发布

蔡定努

最新推荐文章于 2024-08-03 22:32:10 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/caidingnu/article/details/88959967

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h2 class="title-detail">
			图片描述
		</h2>
		<input type="hidden" id="picIndex" value="0">
		<div id='image-list' class="row image-list">
			<!-- <input id="upload_image" type="file" name="image" accept="image/*" /> -->

		</div>
		<div class="image-item space" onclick="showActionSheet()">
			<button class="image-up">拍照</button>
		</div>

	</body>
	<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//图片显示
		function showPics(url, name) {
			//根据路径读取到文件 
			plus.io.resolveLocalFileSystemURL(url, function(entry) {
				entry.file(function(file) {
					var fileReader = new plus.io.FileReader();
					fileReader.readAsDataURL(file);
					fileReader.onloadend = function(e) {
						var picUrl = e.target.result.toString();
						var picIndex = $("#picIndex").val();
						var nowIndex = parseInt(picIndex) + 1;
						$("#picIndex").val(nowIndex);
						var html = '';
						html += '<div class="image-item " id="item' + nowIndex + '">';
						html += '<div class="image-close" onclick="delPic(this)">X</div>';
						html += '<div><img src="' + picUrl + '" class="upload_img" style="width:100%;height:100%;"/></div>';
						html += '</div>';
						html += $("#image-list").html();
						$("#image-list").html(html);
						console.log(html)
					}
				});
			});
		}
		//压缩图片  
		function compressImage(url, filename) {
			var name = "_doc/upload/" + filename;
			plus.zip.compressImage({
					src: url, //src: (String 类型 )压缩转换原始图片的路径  
					dst: name, //压缩转换目标图片的路径  
					quality: 40, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100  
					overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件  
				},
				function(zip) {
					//页面显示图片
					showPics(zip.target, name);
				},
				function(error) {
					plus.nativeUI.toast("压缩图片失败，请稍候再试");
				});
		}

		//调用手机摄像头并拍照
		function getImage() {
			var cmr = plus.camera.getCamera();
			cmr.captureImage(function(p) {
				plus.io.resolveLocalFileSystemURL(p, function(entry) {
					compressImage(entry.toLocalURL(), entry.name);
				}, function(e) {
					plus.nativeUI.toast("读取拍照文件错误：" + e.message);
				});
			}, function(e) {}, {
				filter: 'image'
			});
		}
		//从相册选择照片
		function galleryImgs() {
			plus.gallery.pick(function(e) {
				var name = e.substr(e.lastIndexOf('/') + 1);
				compressImage(e, name);
			}, function(e) {}, {
				filter: "image"
			});
		}

      // 删除照片
		function delPic(a) {
			$(a).next().remove();
			$(a).remove()
		}





		//点击事件，弹出选择摄像头和相册的选项
		function showActionSheet() {
			var bts = [{
				title: "拍照"
			}, {
				title: "从相册选择"
			}];
			plus.nativeUI.actionSheet({
					cancel: "取消",
					buttons: bts
				},
				function(e) {
					if (e.index == 1) {
						getImage();
					} else if (e.index == 2) {
						galleryImgs();
					}
				}
			);



		}
	</script>
</html>