一、引入文件
<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