最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2015-04-25 19:02浏览(1642)

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

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

分类:其它特效 > jQuery插件 难易:中级
查看演示

加我微信,拉你进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();
    })
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/79.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    05-23 12:55
    hsiao
    可以 不错的
1 2