jQuery Cropper 使用说明
Posted 云上人间钦自赏
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery Cropper 使用说明相关的知识，希望对你有一定的参考价值。
先上页面完整的代码，有时间再把不相关的东西去掉：
<!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:hovertext-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，还没用到，预留位置。
另一篇博文一经说的很详细了，请移步这里。
以上是关于jQuery Cropper 使用说明的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Rails 中使用 JQuery Cropper 插件？