jQuery Web前端上传头像图片裁剪插件下载
2015-03-19 12:39:55  By: shinyuu

• shinyuu
• JQuery教程
• 55
• 75170
• 270

分享一个jQuery的头像剪裁工具、类似于新浪微薄上传图片和剪裁图片、剪裁之后生成3个规格的头像、分别是、64 * 64和128 * 128最后还有一个180 * 180、并且可以通过鼠标滚轮的滑动来控制图片的放大和缩小

如果大家网站有上传头像的需求、可以下载源代码看看、或许有用、效果图

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=" width: 200px">-->
        <div class="new-contentarea tc">
            <a href="javascript:void(0)" class="upload-img"> <label
                for="upload-file">上传图像</label>
            </a> <input type="file" class="" name="upload-file" id="upload-file" />
        </div>
        <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">
            <input type="button" id="btnZoomIn" class="Btnsty_peyton" value=" ">
                <input type="button" id="btnZoomOut" class="Btnsty_peyton"
                value="-">
    </div>
    <div class="cropped"></div>
</div>

jQuery代码

$(window).load(function() {
    var options =
    {
        thumbBox: ´.thumbBox´,
        spinner: ´.spinner´,
        imgSrc: ´images/avatar.png´
    }
    var cropper = $(´.imageBox´).cropbox(options);
    $(´#upload-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´).html(´´);
        $(´.cropped´).append(´<img src="´ img ´" align="absmiddle" ´
              ´style="width:64px;margin-top:4px;border-radius:64px;´
              ´box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>´);
        $(´.cropped´).append(´<img src="´ img ´" align="absmiddle" ´
              ´style="width:128px;margin-top:4px;border-radius:128px;´
              ´box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>´);
        $(´.cropped´).append(´<img src="´ img ´" align="absmiddle" ´
              ´style="width:180px;margin-top:4px;border-radius:180px;´
              ´box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>´);
    })
    $(´#btnZoomIn´).on(´click´, function(){
        cropper.zoomIn();
    })
    $(´#btnZoomOut´).on(´click´, function(){
        cropper.zoomOut();
    })
});

以上代码引入了两个JA文件、一个是cropbox.js、用来处理图片的、另外一个当然就是jQuery库了

jquery 图片裁剪插件源代码下载链接: jquery 上传头像裁剪 密码: ee1a

另外、如果你觉得这个效果不是很好、那么你可以下载百度的上传插件、肯定能满足你的需求

百度上传插件Web Uploader下载地址：web uploader demo

最近又分享一个html5 移动端头像上传的插件、如果有需要做Web App的朋友也可以去下载体验体验

html5手机端头像剪裁上传Demo下载地址：html5 手机头像上传

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛