html5头像上传拖动图片头像截图效果,html5头像上传拖动图片头像截图效果

特效描述：html5头像上传 拖动图片 头像截图效果。html5头像截图,头像上传

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

Loading...

$(window).load(function() {

var options =

{

thumbBox: '.thumbBox',

spinner: '.spinner',

imgSrc: 'images/avatar.png'

}

var cropper = $('.imageBox').cropbox(options);

$('#file').on('change', function(){

var reader = new FileReader();

reader.onload = function(e) {

options.imgSrc = e.target.result;

cropper = $('.imageBox').cropbox(options);

}

reader.readAsDataURL(this.files[0]);

this.files = [];

})

$('#btnCrop').on('click', function(){

var img = cropper.getDataURL();

$('.cropped').append('');

})

$('#btnZoomIn').on('click', function(){

cropper.zoomIn();

})

$('#btnZoomOut').on('click', function(){

cropper.zoomOut();

})

});