一、引入文件
<script src="jquery.min.js"></script>
<link rel="stylesheet" href="cropper.css">
<script src="cropper.js"></script>
二、html代码
<div class="box">
<img id="image">
</div> <div id="gg">
<input type="file" id="selectImg"/>
<button id="commit">确认</button>
<button id="rotate">旋转</button>
</div>
<!--剪切后预览图片-->
<img id="yulan">
三、js代码
<script>
//图片选择 触发的事件
$("#selectImg").change(function(){
if(!this.files || !this.files[0]){
return
}
var reader = new FileReader();
reader.onload = function(evt) {
var replaceSrc = evt.target.result;
// 更换cropper的图片
$('#image').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真
}
reader.readAsDataURL(this.files[0]);
}) //旋转图片
$("#rotate").click(function(){
$("#image").cropper('rotate',30)
}) //确定裁剪
$("#commit").on("click",function(){
var cas = $('#image').cropper('getCroppedCanvas');// 获取被裁剪后的canvas
var base64 = cas.toDataURL('image/jpeg'); // 转换为base64
console.log(encodeURIComponent(base64))
$("#yulan").prop('src',base64);//预览 }) //初始化 可以给#image元素一张默认图片 就可以直接看效果
$('#image').cropper({//这里是给img 即被裁剪的图片进行参数配置
aspectRatio: 100 / 100,//裁剪框的比例
preview: $('.avatar-preview'),//预览的容器
autoCropArea: 0.5,//初始化裁剪框大小（相对于图片大小做比例）
movable:false,//是否能移动裁剪框（这里是可以移动图片 裁剪框处于不动的状态 按你的需求设置）
dragCrop:false,//不允许重新开裁剪框
resizable:false,//不允许改变裁剪框大小
background:false,
crop: function(data) {
//data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等
$('#x').val(data.x);
$('#y').val(data.y);
console.log(data)
//console.log('w'+data.width+' height'+data.height);
},
//这几个回调函数
build: function (e) { //是图片绘制到cropper自动生成的canvas的开始 加载开始
//过渡效果
},
built: function (e) { //加载完成 绘制完成 获取到相应的data }
});
四、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片上传测试</title>
<script src="jquery.min.js"></script>
<link rel="stylesheet" href="cropper.css">
<script src="cropper.js"></script>
<style type="text/css">
.box {
width: 400px;
height: 400px;
}
#gg{
margin-top:50px;
}
</style>
</head> <body> <div class="box">
<img id="image">
</div> <div id="gg">
<input type="file" id="selectImg"/>
<button id="commit">确认</button>
<button id="rotate">旋转</button>
</div>
<!--剪切后预览图片-->
<img id="yulan">
<script>
//图片选择 触发的事件
$("#selectImg").change(function(){
if(!this.files || !this.files[0]){
return
}
var reader = new FileReader();
reader.onload = function(evt) {
var replaceSrc = evt.target.result;
// 更换cropper的图片
$('#image').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真
}
reader.readAsDataURL(this.files[0]);
}) //旋转图片
$("#rotate").click(function(){
$("#image").cropper('rotate',30)
}) //确定裁剪
$("#commit").on("click",function(){
var cas = $('#image').cropper('getCroppedCanvas');// 获取被裁剪后的canvas
var base64 = cas.toDataURL('image/jpeg'); // 转换为base64
console.log(encodeURIComponent(base64))
$("#yulan").prop('src',base64);//预览 }) //初始化 可以给#image元素一张默认图片 就可以直接看效果
$('#image').cropper({//这里是给img 即被裁剪的图片进行参数配置
aspectRatio: 100 / 100,//裁剪框的比例
preview: $('.avatar-preview'),//预览的容器
autoCropArea: 0.5,//初始化裁剪框大小（相对于图片大小做比例）
movable:false,//是否能移动裁剪框（这里是可以移动图片 裁剪框处于不动的状态 按你的需求设置）
dragCrop:false,//不允许重新开裁剪框
resizable:false,//不允许改变裁剪框大小
background:false,
crop: function(data) {
//data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等
$('#x').val(data.x);
$('#y').val(data.y);
console.log(data)
//console.log('w'+data.width+' height'+data.height);
},
//这几个回调函数
build: function (e) { //是图片绘制到cropper自动生成的canvas的开始 加载开始
//过渡效果
},
built: function (e) { //加载完成 绘制完成 获取到相应的data }
});
</script>
</body> </html>
cropper文档地址：http://www.jq22.com/jquery-info9322