cropbox头像裁剪插件带放大和缩小

今天介绍一款基于jQuery头像裁剪插件，可以很方便的应用到你的系统当中。演示已经加了缩小和放大功能，有兴趣的朋友可以参考canvas图片左右旋转效果，作出左右旋转效果。

分类：其它特效 > jQuery插件难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先我们在页面上放置上传图片按钮、按钮，及裁剪后图片的位置。

<input type="file" id="file" style="width: 250px" />
<div class="imageBox">
    <div class="thumbBox"></div>
    <div class="spinner" style="display: none">Loading...</div>
</div>
<div class="action">
    <input type="button" id="btnCrop" value="裁剪" />
    <input type="button" id="btnZoomIn" value="放大" />
    <input type="button" id="btnZoomOut" value="缩小" />
</div>
<div class="cropped"></div>

接着我们引入jQuery和裁剪插件cropbox：

jQuery

最后我们调用cropbox插件：

$(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();
    })
});