微客导航 » 文章资讯 » jQuery用户头像裁剪插件cropbox.js使用详解

jQuery用户头像裁剪插件cropbox.js使用详解

2024-02-20 16:27:03 154

几乎每一个网页是必备图片上传，图片裁剪功能，这里通过cropbox.js插件实现该功能。




$(window).load(function(){
varoptions=
{
thumbBox:'.thumbBox',
spinner:'.spinner',
imgSrc:'images/avatar.png'
}
varcropper=$('.imageBox').cropbox(options);
$('#file').on('change',function(){
varreader=newFileReader();
reader.onload=function(e){
options.imgSrc=e.target.result;
cropper=$('.imageBox').cropbox(options);
}
reader.readAsDataURL(this.files[0]);
this.files=[];
})
$('#btnCrop').on('click',function(){
varimg=cropper.getDataURL();
$('.cropped').append('');
})
$('#btnZoomIn').on('click',function(){
cropper.zoomIn();
})
$('#btnZoomOut').on('click',function(){
cropper.zoomOut();
})
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

jQuery用户头像裁剪插件cropbox.js使用详解

热门推荐

随机推荐