mui 拍照和相册功能

雪狼之夜

已于 2022-05-17 09:46:53 修改

阅读量1.5w

点赞数 3

分类专栏： hbuilder 文章标签： javascript 前端 jquery

于 2016-08-30 17:35:13 首次发布

本文链接：https://blog.csdn.net/xuelang532777032/article/details/52371438

版权

hbuilder 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/jquery.js"></script>
		<style>
			.imageup{ position: absolute; margin:auto;left:0px;top:0;right:0;bottom:0; width:100px; height: 36px; line-height:36px; color: #000; border-radius: 5px; border:1px #ddd solid; text-align:center;font-size:20px;;}
		</style>
	</head>
	<body>
		<a href="javascript:void(0);" class="imageup">上传图片</a>
		<script>
			function plusReady(){
				// 弹出系统选择按钮框
				mui("body").on("tap",".imageup",function(){
					page.imgUp();
				})
				
			}
			 
			var page=null;
			page={
				imgUp:function(){
					var m=this;
					plus.nativeUI.actionSheet({cancel:"取消",buttons:[
						{title:"拍照"},
						{title:"从相册中选择"}
					]}, function(e){//1 是拍照  2 从相册中选择
						switch(e.index){
							case 1:clickCamera();break;
							case 2:clickGallery();break;
						}
					});
				}
				//摄像头
			}
			
			
	 //发送照片
	
	function clickGallery() {
		plus.gallery.pick(function(path) {
			plus.zip.compressImage({
				src: path,
				dst: "_doc/chat/gallery/" + path,
				quality: 20,
				overwrite: true
			}, function(e) {
				var task = plus.uploader.createUpload(server + "upload/chat", {
					method: "post"
				}, function(t, sta) {
					console.log(JSON.stringify(t))
					if(sta == 200) {
						var msg = t.responseText;
						var oImg = JSON.parse(msg);
						var imgUrl = oImg.urls;
						var re = new RegExp("\\\\", "g");
						imgUrl = imgUrl.replace(re, "/");
						uploadMsg(2, imgUrl);
					}
				});
				task.addFile(e.target, {});
				task.start();
			}, function(err) {
				console.error("压缩失败：" + err.message);
			});

		}, function(err) {});
	};
	
	
	// 拍照
	
	function clickCamera() {
		var cmr = plus.camera.getCamera();
		var res = cmr.supportedImageResolutions[0];
		var fmt = cmr.supportedImageFormats[0];
		cmr.captureImage(function(path) {
			//plus.io.resolveLocalFileSystemURL(path, function(entry) {
			plus.io.resolveLocalFileSystemURL(path, function(entry) {
				var localUrl = entry.toLocalURL();
				plus.zip.compressImage({
					src: localUrl,
					dst: "_doc/chat/camera/" + localUrl,
					quality: 20,
					overwrite: true
				}, function(e) {
					var task = plus.uploader.createUpload(server + "upload/chat", {
						method: "post"
					}, function(t, sta) {
						if(sta == 200) {
							var msg = t.responseText;
							var oImg = JSON.parse(msg);
							var imgUrl = oImg.urls;
							var re = new RegExp("\\\\", "g");
							imgUrl = imgUrl.replace(re, "/");
							console.log(imgUrl);
							uploadMsg(2, imgUrl);
						}
					});
					task.addFile(e.target, {});
					task.start();
				}, function(err) {
					console.log("压缩失败：  " + err.message);
				});
			});
		}, function(err) {
			console.error("拍照失败：" + err.message);
		}, {
			index: 1
		});
	};


			
			
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener("plusready",plusReady,false);
			}
			
		</script>
	</body> 
</html>

案例下载appTest2.0-HTML5代码类资源-CSDN下载

雪狼之夜

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
10
评论
mui 拍照和相册功能

.imageup{ position: absolute; margin:auto;left:0px;top:0;right:0;bottom:0; width:100px; height: 36px; line-height:36px; color: #000; border-radius: 5px; border:1px #ddd solid; text-align:center;font-s
复制链接

扫一扫