图片上传是许多网站的一个常用的功能，有时需要对上传的图片做初步的选择裁剪，比如上传头像。下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效，可以对选择要上传的图片做缩小、放大、拖动和裁剪，由何问起调试改进，有需要的朋友可以参考一下。在文后附有源码下载。

体验效果：
http://hovertree.com/texiao/jqimg/8/

效果图：

需要引用的css文件为style.css，需要引用的js文件为jquery文件，可以到http://hovertree.com/h/bjaf/ati6k7yk.htm选择合适的版本下载，还需引用cropbox.js文件，这些文件在源码里面都有。

代码如下:

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery拖动剪裁图片作为头像代码 - 何问起</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />

</head>

<body>

<div class="hovertreecontainer">

  <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" 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>

<script src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/cropbox.js"></script>

<script type="text/javascript">

$(window).load(function() {

    var options =

    {

        thumbBox: '.thumbBox',

        spinner: '.spinner',

        imgSrc: 'img/rgevo2ea.jpg'

    }

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

    })

});

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjaf/7x8ev3fh.htm" target="_blank">说明</a></p>

</div>

</body>

</html>

源码下载：
http://hovertree.com/h/bjaf/wnbabbk1.htm

更多特效：

http://www.cnblogs.com/jihua/p/webfront.html

jQuery拖动剪裁图片作为头像的更多相关文章

  1. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  2. WPF 自定义图片剪切器 - 头像剪切（扩展与完善、实时截图）

    原文:WPF 自定义图片剪切器 - 头像剪切(扩展与完善.实时截图) 一.说明:上一次写的"WPF 自定义图片剪切器 - 头像剪切.你懂得"存在明显的缺陷,由于篇幅较长.重新写了一 ...

  3. jQuery+Ajax实现图片的预览和上传

    jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...

  4. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  5. ios CGImageRelease 出现 EXC_BAD_ACCESS的错误 ios特定形状剪裁图片 内存泄露

    CGImageRef imgRef = [image CGImage]; 通过此种方式的得到的CGImageRef不能利用CGImageRelease释放,因为你不拥有它所以不用释放 在ios中特定形 ...

  6. 使用jquery插件实现图片延迟加载技术（懒加载）

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  7. 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...

  8. jQuery之手风琴图片

    <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

随机推荐

  1. 深入理解Spring MVC

    如何让一个普通类成为Controller? 方案一:实现接口Controller 解析:handleRequest(request,response) 方案二:继承AbstractController ...

  2. 在Mac OS X上安装ASP.NET 5（译文）

    ASP.NET 5 运行在包括OS X的可用于多个平台的.NET Execution Environment(DNX)上.本文介绍如何在OS X上通过HomeBrew安装DNX和ASP.NET 5. ...

  3. C#对WebApi数据操作

    目标 简化并统一程序获取WebApi对应实体数据的过程,方便对实体进行扩充.原理就是数据服务使用反射发现数据提供者,处理好泛型就行. 相关传送门:Restful WebApi开发实践 先来看下最后的请 ...

  4. 空中网招聘Java架构师、数据库开发等各类人才

    爱好网络游戏吗?爱好网站开发技术吗? 有没有想过可以成为史诗级MMO RPG<激战2>运营团队中的一员? 如果下面的职位有合适你的,加入我们吧! http://gw2.kongzhong. ...

  5. Win10 字体模糊解决（DPI缩放禁用），设置默认输入法英文

    电脑坏了 , 换了新电脑, 但是新电脑,死活不能装win7, 装都不能装!!!郁闷了 好多地方字体模糊了,百般设置都不好看, 后来远程桌面到win2008server, 发现,在远程桌面里面居然很清晰 ...

  6. salesforce 零基础学习（六十）Wizard样式创建数据

    项目中表之间关联关系特别多,比如三个表中A,B,C  C作为主表,A,B作为从表,有时候C表需要创建数据时,同时需要创建A,B两个表的数据,这种情况下,使用Wizard样式会更加友好. 以Goods_ ...

  7. postman使用

    1.postman的下载:google首页左上角应用,点击后,如果没有下载postman,就在google商店搜索,点击右边按钮 2.下载后重新打开google首页,点击应用,可以看到已经下载过了,点 ...

  8. 前端开发面试题收集(css部分)

    http://davidshariff.com/quiz/ 做了下这里面前端开发面试的题,发现有些不会,所以在此做个整理以供自己学习,参考,总结. 1.问: CSS属性是否区分大小写? ul { Ma ...

  9. 搭建自己的Nuget服务器

    序言 你们公司有没有好多项目,有没有好多类库,你们的类库是在tfs中管理,还是svn或者github,又或者是各自为政版本类库随意使用? 那么你们使用者写类库的时候方便吗? 有没有更新下载,版本不一致 ...

  10. .NET MVC Razor模板预编译（二）

    在前面一片文章:<.NET MVC4 Razor视图预编译(一)> 里面我采用的是PrecompiledMvcViewEngineContrib组件进行预编译视图的虚拟地址注册,但是这个组 ...