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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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

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