jQuery Cropper 使用说明

苗冯浩
2023-12-01

先上页面完整的代码,有时间再把不相关的东西去掉:

<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" href="js/imagecropper/bootstrap.min.css" />
		<link rel="stylesheet" href="js/imagecropper/cropper.css" />
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/pinglun.css" />
		<link href="css/app.css" rel="stylesheet" />

		
		<style>
			body {
				background-attachment: fixed;
				background-size: 100% 100%;
				background-color: #efeff4;
			}
			a:hover{text-decoration: none;}
			.mui-content>.mui-table-view:first-child {
				margin-top: 0px
			}
			
			.mui-input-row label {
				font-weight: normal;
			}
			
			.mui-content-logo {
				height: 140px;
				text-align: center;
				vertical-align: middle;
				background-color: #00abed;
				
			}
			
			.mui-content-logo div {
				margin: 0 auto;
				position: relative;
				top: 20%;
			}
			
			.mui-content-logo .font2 {
				color: white;
				width: 150px;
				margin-top: 15px;
				font-weight: bold;
			}
			
			.mui-content-logo .font2 {
				line-height: 30px;
				width: 150px;
				list-style-type: none;
				text-align: center;
			}
			
			.mui-content {
				height: 200px;
				margin-top: -20px;
			}
			
			.mui-table-view li {
				line-height: 30px;
			}
			
			.mui-table-view div,
			/*a {
				float: left;
			}*/
			
			.mui-table-view div {
				width: 45px;
				height: 30px;
			}
			
			.flex-container {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-flex-flow: row wrap;
				justify-content: space-between;
				text-align: center;
			}
			
			/*.mui-content-padded {}
			
			.mui-content-padded a {
				margin: 3px;
				width: 50px;
				height: 50px;
				display: inline-block;
				text-align: center;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
			}
			
			.mui-content-padded a .mui-icon {
				margin-top: 12px;
			}*/
			.andro-margin-person-edit{
				
				margin-top: 90px;
			}
			.ios-margin-person-edit{
				margin-top:0px;
			}
			#topPopover {
				position: fixed;
				top: 190px;
				
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="">
			<div style="margin-top:30px;">
				<a class="mui-icon mui-icon-back mui-pull-left mui-action-back" style="color: #fff;font-size: 26px;"></a>
				<h1 class="mui-title">编辑个人资料</h1>
				<!--<span class="mui-icon mui-icon-plus mui-pull-right" id="addnew" style="color: #fff;font-size: 26px;"></span>-->
			</div>
		</header>

		<div class="mui-content" style="">
			<div class="mui-content-logo">
				<div id="changeAvatar" class="touxiang"  style="width:85px; height:85px; border-radius:85px;">
					<img src="img/login_logo.png"  οnclick="showActionSheet()"/>
				</div>
			</div>
			<div id="topPopover" class="mui-popover" style="width: 110px;font-size: 12px;">
				<div class="mui-popover-arrow" style="margin-left: 42px;"></div>
				<div style="text-align: center;">点击这里修改头像</div> 
			</div>
			<div style="">
				
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-input-row">
						<label>辖区</label>
						<input type="text" id="txtbranch" disabled="disabled"></input>
					</li>
				</ul>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-input-row" id="licommunity" style="display: none;">
						<label>社区</label>
						<input type="text" id="txtcomm" disabled="disabled"></input>
					</li>
				</ul>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-input-row">
						<label>姓名</label>
						<input type="text" id="txtname" disabled="disabled"></input>
					</li>
				</ul>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-input-row">
						<label>警号</label>
						<input type="text" id="txtcode" disabled="disabled"></input>
					</li>
				</ul>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-input-row">
						<label>手机号</label>
						<input type="text" id="txtphone"></input>
					</li>
				</ul>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-input-row">
						<label>短号</label>
						<input type="text" id="txtshort"></input>
					</li>
				</ul>
				<div style="clear: both;"></div>
				<div style="width:100%;margin: 0 auto; text-align: center;margin-bottom: 20px;margin-top:20px;">
					<input id="btnadd" type="submit" value="保存" style="width:30%;"  οnclick="postAvatar()"/>
				</div>
				
			</div>

		</div>
		
		<!--<div style="width:90%;margin: 0 auto;margin-top:30px;">
			<button type="button" class="mui-btn mui-btn-primary mui-btn-block" style="height: 40px;" οnclick="postAvatar()">确认提交</button>//保存数据事件
		</div>-->
		<div style="text-align: center;z-index: 99;width: 100%;height: 2000px;background-color: #f2f2f2 ;position: absolute;top:40px;left: 0px;display: none;" id="spinner">
			<div style="width:90px;padding-top:200px;margin:0 auto;height: 100%;">
				<div style="width:30px;float: left;">
					<span class="mui-spinner" style="height: 20px;"></span>
					<!--//等待动画-->
				</div>
				<div style="width:60px;float: left;">请稍等...</div>
				<div class="clear"></div>
			</div>
		</div>
		<div id="showEdit" style="width:100%;height: 100%;background-color: #000;position: absolute;top:10px;left: 0px;display: none;z-index: 9;">
			<div id="report" style="width:100%;height: 100%;z-index: 10;">
				<img id="readyimg" style="width:100%;">
			</div>
			<div class="mui-content-padded" style="width:100%;height: 50px;z-index: 110;margin:0px;position: absolute;top:80px;left:0px;">
				<div class="flex-container">
					<a><span class="mui-icon mui-icon-closeempty" οnclick="closepop()"></span></a>
					<!--//关闭裁剪窗口-->
					<a><span class="mui-icon mui-icon-undo" οnclick="rotateimgleft()"></span></a>
					<!--//左旋转90度-->
					<a><span class="mui-icon mui-icon-redo" οnclick="rotateimg()"></span></a>
					<!--//右旋转90度-->
					<a><span class="mui-icon mui-icon-checkmarkempty" οnclick="confirm()"></span></a>
					<!--//确定-->
				</div>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/jquery-1.7.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/db.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jushi.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/imagecropper/jquery.min.js"></script>
		<script type="text/javascript" src="js/imagecropper/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/imagecropper/cropper.js"></script>
		<script type="text/javascript">
			
			document.addEventListener("plusready", plusReady, false);
			var conn = new DBConn();
			//post内容  
			function postAvatar() {
				var uimage = $("#changeAvatar > img").attr("src"); //此时取到的图片已经是base64形式  
				console.log(uimage);
				//你的处理代码,改post到服务器了,服务器接收同接收普通post参数一样,只是,存图片的字段改成ntext,这是sql的数据类型,
				//其他数据库同类型,jq的getJSON可能会不执行,因为getJSON是get模式,图片转成base64后,
				//很容易超出最大长度,其实,经过压缩后,一般不会超出的,具体压缩方法下文有
				console.log(Date.now()+"修改个人信息");
				$.ajax({
					type:"post",
					url:server+"?action=updtinfo",
					async:true,
					dataType:"json", 
					data:{
						img:uimage,
						phone:$("#txtphone").val(),
						short:$("#txtshort").val(),
						code:$("#txtcode").val()
					},
					success:function(data,ts,xhr){
						//console.log(JSON.stringify(data));
						if(data.success){
							plus.storage.setItem("phone",$("#txtphone").val());
							plus.storage.setItem("phoneshort",$("#txtshort").val());
							plus.storage.setItem("userimg",data.imgurl);
							var person=plus.webview.getWebviewById("personal_child.html");
							mui.fire(person,'refresh',{});
							mui.toast("更新成功");
							mui.back();
						}
						else{
							mui.toast(data.msg);
						}
					},
					error:function(xhr,ts,et){
						console.log("ts:"+ts+"et:"+et);
					}
				});
			}
			//拍照  
			function getImage() {
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						var localurl = entry.toLocalURL(); //  
						$("#report").html('<img src="/static/css/default/img/default.jpg" data-original="' + localurl + '">');
						cutImg();
						mui('#picture').popover('toggle');
					});
				});
			}
			//相册选取  
			function galleryImgs() {
				plus.gallery.pick(function(e) {
					//alert(e);  
					$("#readyimg").attr("src", e);
					cutImg();
					mui('#picture').popover('toggle');
				}, function(e) {
					//outSet( "取消选择图片" );  
				}, {
					filter: "image"
				});
			}
			//照片裁剪类  
			function cutImg() {
				$(".mui-content").hide();
				$("#showEdit").fadeIn();
				var $image = $('#report > img');
				$image.cropper({
					checkImageOrigin: true,
					aspectRatio: 1 / 1,
					autoCropArea: 0.3,
					zoom: -0.2
				});
				//                  $image.cropper('zoom',-0.5);  
			}
			//确认照片,展示效果  
			function confirm() {
				$("#showEdit").fadeOut();
				var $image = $('#report > img');
				var dataURL = $image.cropper("getCroppedCanvas");
				//              var imgurl = dataURL.toDataURL("image/png", 0.5);  
				//换成下边的方法,转成jpeg,但是把质量降低,  
				//经测试51k的png,转成0.3质量,大小为3k多,0.5质量大小为4k多,  
				//这回应该不会出现卡的情况了,  
				//既然差别1k多,还是用0.5的质量,还是要兼顾下显示效果的。  
				var imgurl = dataURL.toDataURL("image/jpeg", 0.3);
				$("#changeAvatar > img").attr("src", imgurl);
				//              $("#divbtn").show();  
				$(".mui-content").show();
			}
			//旋转照片  
			function rotateimg() {
				$("#readyimg").cropper('rotate', 90);
			}

			function rotateimgleft() {
				$("#readyimg").cropper('rotate', -90);
			}

			function closepop() {
				$("#showEdit").fadeOut();
				var $image = $('#report > img');
				$image.cropper('destroy');
				$(".mui-content").show();
			}

			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();
						}
						//outLine( "选择了\""+((e.index>0)?bts[e.index-1].title:"取消")+"\"");  
					}
				);
			}

			function plusReady() {
				//alert(plus.storage.getItem("realname"));
				switch (plus.os.name) {
					case "Android":
						$(".mui-content-logo").addClass("andro-margin-person-edit");
						break;
					case "iOS":
						$(".mui-content-logo").addClass("ios-margin-person-edit");
						break;
					default:
						break;
				}
				//去掉滚动条
				plus.webview.currentWebview().setStyle({
					scrollIndicator: 'none'
				});
				getPersonInfo();
//				plus.storage.removeItem("personalEditTipCount");
				setTimeout(function(){
					tip();
				},1000);
			}
			function tip(){
				var personalTipCount=plus.storage.getItem("personalEditTipCount");
				//alert(personalTipCount);  
				if(personalTipCount!=null){
					var count=parseInt(personalTipCount);
					if(count>3){
						return;
					}
					else{
						plus.storage.setItem("personalEditTipCount",""+(count+1)+""); 
					}  
				}
				else{
					plus.storage.setItem("personalEditTipCount","1");
				}
				var width=plus.screen.resolutionWidth;
				var right=(width/2)-55;
				$("#topPopover").css({"right":right});
				mui('.mui-popover').popover('show'); 
				
				setTimeout(function(){ 
					mui('.mui-popover').popover('hide');
				},5000);
			}
			function getPersonInfo() {
				//console.log("ssdddddddddddd");
				$("#txtname").val(plus.storage.getItem("realname"));
				$("#txtcode").val(plus.storage.getItem("loginname"));
				$("#txtphone").val(plus.storage.getItem("phone"));
				$("#txtshort").val(plus.storage.getItem("phoneshort"));
				$("#txtbranch").val(plus.storage.getItem("branchname"));
				if (plus.storage.getItem("communityname").toString().length > 1) {
					$("#txtcomm").val(plus.storage.getItem("communityname"));
					$("#licommunity").show();
				}
				var userimg=plus.storage.getItem("userimg");
				//console.log(userimg); 
				if(userimg.length>1){
					$(".touxiang img").attr("src",userimg);
				} 
				//console.log("ssssssssss"+$("#changeAvatar > img").attr("src")); 
			}
		</script>
	</body>

</html>


按照步骤说明:

一、头部引用css

<link rel="stylesheet" href="src/cropper.css">

二、body底部引用各种js

<script type="text/javascript" src="js/imagecropper/jquery.min.js"></script>
<script type="text/javascript" src="js/imagecropper/bootstrap.min.js"></script>
<script type="text/javascript" src="js/imagecropper/cropper.js"></script>

注意:jq版本不能低于10

三、各种方法使用

1:裁剪图片

function cutImg() {
$("#showEdit").fadeIn();
var $image = $('#report > img');
$image.cropper({
checkImageOrigin: true,
aspectRatio: 1 / 1,
autoCropArea: 0.5
});
}

2:确认头像,展示效果

//确认照片,展示效果
function confirm() {
$("#showEdit").fadeOut();
var $image = $('#report > img');
var dataURL = $image.cropper("getCroppedCanvas");//找死了
var imgurl=dataURL.toDataURL("image/png",1.0);//这里转成base64 image,img的src可直接使用
$("#changeAvatar > img").attr("src", imgurl);
}

3:旋转

//旋转照片
function rotateimg() {
$("#readyimg").cropper('rotate', 90);
}


function rotateimgleft() {
$("#readyimg").cropper('rotate', -90);
}

ios对内存有保护,本地没法旋转,需借助EXIF,还没用到,预留位置。

另一篇博文一经说的很详细了,请移步这里



 类似资料: