标签：
今天给大家分享一款基于jQuery头像裁剪插件cropbox，这是一款简单实用的jQuery头像在线裁剪插件。该插件适用于适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：
实现的代码。
html代码：
<div class="container">
<div class="imageBox">
<div class="thumbBox">
</div>
<div class="spinner" style="display: none">
Loading...</div>
</div>
<div class="action">
<input type="file" id="file" style="float: left; width: 250px">
<input type="button" id="btnCrop" value="Crop" style="float: right">
<input type="button" id="btnZoomIn" value="+" style="float: right">
<input type="button" id="btnZoomOut" value="-" style="float: right">
</div>
<div class="cropped">
</div>
</div>
css代码：
.container
{
position: absolute;
top: 5%;
left: 36%;
right: 0;
bottom: 0;
}
.action
{
width: 400px;
height: 30px;
margin: 10px 0;
}
.cropped > img
{
margin-right: 10px;
}
javascript代码：
$(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(‘<img src="‘ + img + ‘">‘);
})
$(‘#btnZoomIn‘).on(‘click‘, function () {
cropper.zoomIn();
})
$(‘#btnZoomOut‘).on(‘click‘, function () {
cropper.zoomOut();
})
});
标签：
原文地址：http://www.cnblogs.com/liuwenbohhh/p/4342950.html
