1、前言
为了更好的裁剪图片，并且适用于企业开发中，总结了一个弹框裁剪的小demo，为此记录下来。
2、效果
- 页面效果：
上传图片效果
选择图片效果
裁剪效果
编辑效果
3、源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片裁剪上传</title>
<link rel="stylesheet" href="css/cropper.css" />
<link rel="stylesheet" href="layui/css/layui.css" />
<style type="text/css">
body{
margin: 5px 5px;
}
#uploadBtn{
margin-top: 10px;
}
.img-div{
max-width: 480px;
}
.alert-hide,
.edit-pic-btn{
display: none;
}
.btn{
position: relative;
width: 113px;
height: 38px;
margin-left: 15px;
margin-top: -5px;
}
.file{
position: absolute;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
margin-top: -38px;
opacity:0;
}
img{
max-width: 480px;
}
.edit-pic-btn{
margin: 15px;
}
.show-div{
text-align: center;
margin-top: 20px;
}
.preview{
overflow: hidden;
width:160px;
height: 120px;
margin-left: 490px;
margin-top: -10px;
}
.img-edit{
display: none;
width: 480px;
height: 360px;
margin-left: 10px;
}
.cut-div{
position: absolute;
width: 480px;
height: 360px;
}
#editBtn{
margin-top: 10px;
}
.show-img{
margin-bottom: 40px;
margin-top: 35px;
}
</style>
</head>
<body>
<div class="img-div" id="uploadImg">
<img src="img/defalutl.png" />
</div>
<div>
<input id="editBtn" type="button" class="layui-btn layui-btn-norma" value="编辑图片"/>
<input id="uploadBtn" type="button" class="layui-btn layui-btn-norma" value="上传图片"/>
</div>
</body>
<!--
作者：[email protected]
时间：2017-11-30
描述：弹框内容
-->
<div id="alertBtnDiv" class="alert-hide">
<div class="show-div">
<div class="btn">
<button type="button" class="layui-btn" >
<i class="layui-icon"></i>选择图片
</button>
<input type="file" class="file" onchange="selectImg(this);"/>
</div>
<div class="show-img">
<img class="source-img" src="" />
</div>
<div class="img-edit">
<div class="cut-div">
<img class="cut-img" src="" />
</div>
<div class="preview"></div>
</div>
<div class="edit-pic-btn">
<button id="cut" class="layui-btn layui-btn-normal" onclick="edit(this);">裁剪</button>
<button id="cancle" class="layui-btn layui-btn-disabled" onclick="cancel(this);">取消裁剪</button>
<button class="layui-btn layui-btn-normal" onclick="imgConfirm(this);">确认</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="js/cropper.js" ></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
var base64;
$(function(){
//上传
$("#uploadBtn").click(function(){
showBox($("#alertBtnDiv"));
});
//编辑
$("#editBtn").click(function(){
var image = $("#uploadImg").find("img").attr("src");
if(image == "img/defalutl.png"){
layer.alert("请先上传图片");
return;
}
var showEditDiv = $("#alertBtnDiv").clone();
showEditDiv.find(".btn").hide();
showEditDiv.find(".show-img").hide();
showEditDiv.find(".img-edit").show();
showEditDiv.find(".edit-pic-btn").show();
showEditDiv.find(".edit-pic-btn #cut").hide();
showEditDiv.find("#cancle").hide();
showEditDiv.find(".cut-div").find(".cut-img").attr("src", image);
showBox(showEditDiv);
$(".cut-div").find(".cut-img").cropper({
aspectRatio: 4 / 3,
viewMode: 3,
preview: '.preview',
dragMode: 'move'
});
});
});
//选择上传图片
function selectImg(obj){
var showImg = $(obj).parent(".btn").next();
var image = obj.files[0];
var reader = new FileReader();
reader.onload = function(){
$(obj).parent(".btn").hide();
base64 = this.result;
showImg.find("img").attr("src", base64);
$(obj).parent(".btn").next().next().next().show();
}
reader.readAsDataURL(image);
}
//编辑裁剪图片
function edit(obj){
if ("layui-btn layui-btn-disabled" == $(obj).attr("class")) {
return;
}
$(obj).attr("class", "layui-btn layui-btn-disabled");
$(obj).next().attr("class", "layui-btn layui-btn-normal");
$(obj).parent(".edit-pic-btn").prev().prev().hide();
var editImg = $(obj).parent(".edit-pic-btn").prev();
editImg.find(".cut-img").attr("src", base64);
editImg.show();
editImg.find(".cut-img").cropper({
aspectRatio: 4 / 3,
viewMode: 3,
preview: '.preview',
dragMode: 'move'
});
}
//取消裁剪
function cancel(obj){
if ("layui-btn layui-btn-disabled" == $(obj).attr("class")) {
return;
}
$(obj).parent(".edit-pic-btn").prev().find(".cut-img").cropper("reset");
$(obj).parent(".edit-pic-btn").prev().hide();
$(obj).parent(".edit-pic-btn").prev().prev().show();
$(obj).attr("class", "layui-btn layui-btn-disabled");
$(obj).prev().attr("class", "layui-btn layui-btn-normal");
}
//确认裁剪
function imgConfirm(obj){
var editImg = $(obj).parent(".edit-pic-btn").prev();
var showImg = $(obj).parent(".edit-pic-btn").prev().prev();
if(editImg.css("display") == "block" && showImg.css("display") == "none"){
//裁剪
base64 = editImg.find(".cut-img").cropper('getCroppedCanvas').toDataURL();
}
/*
图片加载的时候已经拿到,base64定义的是全局变量
if(showImg.css("display") == "block" && editImg.css("display") == "none"){
//未裁剪状态
base64 = showImg.attr("src");
}
*/
$("#uploadImg").find("img").attr("src", base64);
layer.closeAll();
}
function showBox(box){
layer.open({
type:1,
title:"图片设置",
area:['670px','500px'],
content:box.html()
});
}
</script>
</html>
4、注意事项
- 该效果依赖于layer、layerui和cropper三款插件，引用是要引用其js以及对应的css
- 主要思想就是将上传的图片转化成base64格式，然后使用裁剪工具裁剪（裁剪工具本身显示的就是base64格式的图片）
5、参考资料
layer官网（弹框和上传）：http://www.layui.com/doc/modules/layer.html
cropper 官网： https://www.awesomes.cn/repo/fengyuanchen/cropper