此插件的依賴項(xiàng)
<script src=".../jquery.js"></script> （ zepto || jquery 之一）
<link href=".../cropper.css" rel="stylesheet">
<script src=".../cropper.js"></script>
HTML部分
<div class="img_pop_up">
<div class="self_img_pop_up">
<div class="cut_img">
<img id="imgTest" src="" alt="">
</div>
<div class="confirm_button">
<div class="picture_div">
<input type="file" id="fileTest">
<span>選擇圖片</span>
</div>
<div class="rotate_div">
<button class="rotate_left">向左旋轉(zhuǎn)</button>
<button class="rotate_right">向右旋轉(zhuǎn)</button>
</div>
<button class="cancel_choose">取消</button>
<button class="confirm_choose">確定</button>
</div>
</div>
</div>
CSS部分
.img_pop_up {
width : 100%;
height : 100%;
background: rgba(0,0,0,.5);
z-index : 999;
position : absolute;
display : none;
.self_img_pop_up {
background : #fff;
border-radius: 0.5rem;
position : absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
width : 96%;
height : 80%;
margin : auto;
padding-top : 1rem;
.cut_img {
width : 94%;
height: 75%;
margin: 0 auto;
// img {
// width : 100%;
// height: 100%;
// }
}
.confirm_button {
width : 100%;
height : 25%;
text-align: center;
padding: 0 10%;
.rotate_div{
width: 100%;
height:100%;
overflow: hidden;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-around;
.picture_div{
border : none;
width : 100%;
height : 25%;
background : #e0b268;
border-radius: 0.5rem;
font-size : 1.5rem;
color : #fff;
position: relative;
display: table;
span{
display: table-cell;
vertical-align: middle;
}
input{
position: absolute;
opacity: 0;
left:0;
top:0;
height: 100%;
width: 100%;
}
}
button {
border : none;
width : 48%;
height : 25%;
background : #e0b268;
border-radius: 0.5rem;
font-size : 1.5rem;
color : #fff;
}
}
}
}
}
JS部分
監(jiān)聽(tīng)上傳變化
配置cropper參數(shù),關(guān)于cropper參數(shù)缚够，網(wǎng)上可以自由搜到,此處不做太多贅述,(移動(dòng)端兼容關(guān)鍵參數(shù)：cropBoxMovable :false,//是否允許拖動(dòng)裁剪框)
// 監(jiān)聽(tīng)上傳變化
$('#fileTest').live('change', function(ev) {
let $file = $(this);
let fileObj = $file[0];
let windowURL = window.URL || window.webkitURL;
let dataURL = null;
if (!fileObj || !fileObj.files || !fileObj.files[0]) return;
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$("#imgTest").attr('src', dataURL);
$("#imgTest").cropper({
aspectRatio: 1 / 1,
viewMode : 1,
rotatable: true,
guides :false,//裁剪框虛線 默認(rèn)true有
dragMode : "move",
background : true,// 容器是否顯示網(wǎng)格背景
movable : true,//是否能移動(dòng)圖片
cropBoxMovable :false,//是否允許拖動(dòng)裁剪框
cropBoxResizable :false,//是否允許拖動(dòng) 改變裁剪框大小
});
$("#imgTest").cropper('replace', dataURL);
});
彈出框
// 點(diǎn)擊彈出
$('.self_logo_up').off().on('click', function() {
$('.img_pop_up').css('display', 'block');
})
向左旋轉(zhuǎn)按鈕
// 向左旋轉(zhuǎn)
$('.rotate_left').off().on('click', function() {
$("#imgTest").cropper('rotate', -45);
})
向右旋轉(zhuǎn)按鈕
// 向右旋轉(zhuǎn)
$('.rotate_right').off().on('click', function() {
$("#imgTest").cropper('rotate', 45);
})
取消上傳按鈕
// 取消上傳圖片事件
$('.cancel_choose').off().on('click', function() {
$('.img_pop_up').css('display', 'none');
clear();
})
點(diǎn)擊確定按鈕將base64賦給img標(biāo)簽
// 點(diǎn)擊確定
$('.confirm_button .confirm_choose').off().on('click', function() {
if ($("#imgTest").cropper('getCroppedCanvas') == null) return;
let base64 = $("#imgTest").cropper('getCroppedCanvas').toDataURL('base64', 0.3);
$('.self_bg').remove();
const logoImg = `<div class="self_bg" style="display:block;">
[圖片上傳失敗...(image-1fecd5-1512026520854)]
</div>`
$('.self_logo_up').append(logoImg);
// 清空
$("#imgTest").cropper('reset');
$('.img_pop_up').css('display', 'none');
clear();
});
希望對(duì)你有所幫助！
