头像

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

来源:http://www.sucaihuo.com/js/910.html 素材火管理员 2016-07-31 15:24浏览(1387) 收藏

本文的头像上传裁剪是参照新浪微博个人中心的,支持裁剪缩小放大,并且可预览三种不同尺寸的放大镜图片效果。
cropped仿新浪微博头像上传裁剪缩小放大预览
分类:手机特效 > 上传文件 难易:中级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 23

手机扫码访问:

下载资源 下载积分: 159 积分

上传图像,裁剪,放大,缩小等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();
})
评论47
头像

友情提示:垃圾评论一律封号...

  • 头像 46楼
    05-04 09:26
    a51821064
    很不错的资源,希望有用!
  • 头像 45楼
    05-03 16:26
    不一样的烟火
    很不错的资源,希望有用
  • 头像 44楼
    04-14 09:33
    sucaiH001
    资源不错,谢分享
  • 头像 43楼
    03-28 15:35
    小小小书生
    移动端不能移动图片啊
  • 头像 42楼
    03-14 15:58
    a51821064
    挺好,不错
  • 头像 41楼
    03-07 11:35
    яW---
    话说手机端的时候不能拖动呢?怎么处理,大神们?谢谢
  • 头像 40楼
    02-06 15:53
    momomo2
    不错的资源,试试示爱
  • 头像 39楼
    01-22 15:26
    caihua888
    如何保存裁切后的图片呀
  • 头像 38楼
    01-05 17:21
    gongsui
    不错,下载下来 试试呢
  • 头像 37楼
    12-25 10:30
    147369a
    不错的资源,谢谢!.
1 2