通过jQuery-photoClip插件可以实现适配移动端进行裁剪，旋转、缩放等功能。 效果网站：www.jylynn.top/photoClip/ 效果：
body,html{
font-size: 50px;
}
.main{
width: 100%;
height: 100%;
}
/* 上传按钮盒子 */
.upload-btn-box{
width: 2.4rem;
height: 1.8rem;
background: #EFEFEF;
margin-top: .16rem;
position: relative;
}
/* 上传按钮 */
.imgboxa{
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-webkit-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
cursor: pointer;
}
.inputFile{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
z-index: 2;
}
.add-icon{
width: .4rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
/* 裁剪画布 */
#clipArea{
height: 100%;
position: absolute;
z-index: 998;
width: 100%;
background: rgba(0,0,0,.7);
display: none;
top: 0;
left: 0;
}
/* 裁剪后图片显示区域 */
#view-photo{
position: absolute;
width: 100%;
height: 100%;
border: .02rem solid #E6E9EF;
background-color: #fff !important;
display: none;
}
/* 删除按钮 */
.del-photo{
content: "";
display: inline-block;
position: absolute;
width: .36rem;
height: .36rem;
background: url(./close2@2x.png) no-repeat;
background-size: 100% 100%;
right: 0;
top: 0;
}
/* 截取按钮 */
.clip-button-area{
display: none;
height: 1rem;
width: 100%;
position: absolute;
bottom: 0;
background: rgba(0,0,0,.6);
border-top: .02rem solid #fff;
line-height: 1rem;
text-align: center;
z-index: 999;
}
#clipBtn{
font-size: .36rem;
color: #fff;
}
<div class="main">
<p style='font-size: .28rem;'>头像：</p>
<div class="upload-btn-box">
<a href="javascript:;" class="imgboxa">
<input type="file" id="file" class="inputFile">
<img src="./addShape@2x.png" class="add-icon" alt="">
</a>
<!-- 裁剪后图片显示区域 -->
<div id="view-photo">
<span class="del-photo"></span>
</div>
</div>
<!-- 裁剪画布 -->
<div id="clipArea">
</div>
<!-- 裁剪按钮 -->
<div class="clip-button-area">
<div id="clipBtn">截取</div>
</div>
</div>
<script src='./jquery-2.1.4.min.js'></script>
<script src="./image-deal/hammer.min.js"></script>
<script src="./image-deal/iscroll-zoom-min.js"></script>
<script src="./image-deal/lrz.all.bundle.js"></script>
<script src="./image-deal/PhotoClip.js"></script>
JS代码:
<script>
var _this = this;
var one_obj = {
/**
* @param base64Codes
* 图片的base64编码
*/
// 可不用
funUploadFile: function(base64Codes){
var self = this;
var formData = new FormData();
//convertBase64UrlToBlob函数是将base64编码转换为Blob
//append函数的第一个参数是后台获取数据的参数名,在php中用$FILES['imageName']接收，
formData.append("imageName",self.convertBase64UrlToBlob(base64Codes));
//ajax 提交form
},
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
// 可不用
convertBase64UrlToBlob: function(urlData){
//去掉url的头，并转换为byte
var bytes=window.atob(urlData.split(',')[1]);
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
// 此处type注意与photoClip初始化中的outputType类型保持一致
return new Blob( [ab] , {type : 'image/jpeg'});
},
//初始化
init: function() {
var self = this;
clipArea = new PhotoClip('#clipArea', {
size: [ 300, 300],// 截取框的宽和高组成的数组。默认值为[260,260]
outputSize:[ 300, 300],// 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
file: "#file", //上传图片的<input type="file">控件的选择器或者DOM对象
view: "#view-photo", // 显示截取后图像的容器的选择器或者DOM对象
ok: "#clipBtn",
//img: 'img/mm.jpg',
loadStart: function() {
$('#clipArea').show();
$('.clip-button-area').show();
},
loadComplete: function() {
},
done: function(dataURL) {
$('#view-photo').show();
$('#clipArea').hide();
$('.clip-button-area').hide();
},
fail: function(msg) {
// alert(msg);
}
});
},
//销毁
broke: function () {
clipArea.clear();
$('#view-photo').hide();
}
};
one_obj.init();
$('.del-photo').on('click',function () {
// $('#view-photo').hide();
$('#view-photo').css('background-image','');
one_obj.broke();
})
</script>
遇到的坑：在插件网站找到的iscroll-zoom-min.js几个插件英文版本问题，会导致在手机上缩放时候会有问题，后面网上找到合适的版本解决了。
相关插件可在此下载代码文件
感谢你的观看,觉得可以的可以点个关注~
