图片尺寸裁剪功能在网络上多种多样,其中cropit-master使用的较多。本文使用网络上现有的代码,整理出一个可实现个人需求功能的代码。
实现的功能:上传的图片可按照固定的尺寸裁剪;
1、图片可通过鼠标滚轮缩小到合适的位置;
2、图片可移动到合适的位置
适用于:头像的裁剪;后台上传的图片,若尺寸出现1px的差错都可能导致页面布局变乱。
<div class="img_up">
<span>点击上传图片</span>
<input type="file" id="file"><div id="view"><img src="">
</div>
<!-- 弹框部分 -->
<div class="cover-wrap">
<div class="cover_box">
<div id="clipArea"></div><button id="clipBtn">保存图片</button>
</div>
</div>
<script src="js/jquery-2.1.3.min.js" charset="utf-8"></script>
<script src="js/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var clipArea = new bjj.PhotoClip("#clipArea", {
size: [800, 600],// 截取框的宽和高组成的数组。默认值为[260,260]
outputSize: [800, 600], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
loadStart: function() {
// 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
$('.cover-wrap').fadeIn();
console.log("照片读取中");
},
loadComplete: function() {
// 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
console.log("照片读取完成");
},
//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
clipFinish: function(dataURL) {
// 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
$('.cover-wrap').fadeOut();
$("#view img").attr("src",dataURL)
$(".img_up").css({"height":"auto"})
$(".img_up span").fadeOut(0);
console.log(dataURL);
}
});
</script>
@charset "utf-8";
.cover-wrap{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.4);
z-index: 10000000;
text-align:center;
}
.cover_box{
height: 100%;
position: absolute;
left: 50%;
top: 50%;
width: inherit;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#clipBtn{
background: #0A59F8;
border-radius: 20px;
padding: 9px 32px;
color: #fff;
font-size: 1.1rem;
letter-spacing: 1px;
display: block;
cursor: pointer;
margin: 3% auto;
box-shadow: 1px 2px 5px rgb(56 119 199 / 20%);
position: fixed;
left: 50%;
bottom: 5%;
-webkit-transform: translate(-50%,-0%);
transform: translate(-50%,-0%);
}
#clipArea{
height: inherit;
}
button{
box-shadow: none;
border: none;
font-size: 12px;
}
img{
width: 100%;
display: block;
}
.img_up {
position: relative;
background: #eee;
width: 500px;
height: 300px;
border: 1px solid #f0f0f0;
box-sizing: border-box;
border-radius: 5px;
margin: auto;
overflow: hidden;
}
input {
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
opacity: 0;
cursor: pointer;
background: none;
border: none;
box-shadow: none;
}
.img_up span {
font-size: 16px;
display: block;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}