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

cropped仿新浪微博头像上传裁剪缩小放大预览

来源:http://www.erdangjiade.com/ 沐浴春风 2016-07-31 15:24浏览(3646)

本文的头像上传裁剪是参照新浪微博个人中心的,支持裁剪缩小放大,并且可预览三种不同尺寸的放大镜图片效果。

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

cropped仿新浪微博头像上传裁剪缩小放大预览
分类:手机特效 > 上传文件 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

上传图像,裁剪,放大,缩小等html代码

<div class="imageBox">
    <div class="thumbBox"></div>
    <div class="spinner" style="display: none">Loading...</div>
</div>
<div class="action"> 
    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
            <label for="upload-file">上传图像</label>
        </a>
        <input type="file" 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>
<script type="text/javascript" src="js/cropbox.js"></script>
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();
})
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/910.html
评论11
头像

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

  • 头像 10楼
    12-29 08:30
    ngu137
    这个真心不错 啊啊。。。。。
  • 头像 9楼
    11-27 08:36
    puton_wp
    真心不错
  • 头像 8楼
    10-18 18:47
    夜啸苍姬1
    这个效果挺实在的
  • 头像 7楼
    10-11 16:26
    haochunqiu
    不错 学习了 终于找到这玩意了!
  • 头像 6楼
    09-28 10:57
    yunxiaoxue027
    学习学习 谢谢 辛苦了
  • 头像 5楼
    09-22 08:12
    ahong617
    好东西啊。。。。顶。。。。
  • 头像 4楼
    08-26 11:44
    一只小肥牛
    额,挺不错的
  • 头像 3楼
    08-01 14:49
    zhaowei123
    很不错,终于找到了
  • 头像 板凳
    07-21 12:25
    test11
    好东西啊
  • 头像 椅子
    05-19 14:24
    roger858
    终于找到这玩意了!
1 2