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

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

效果图：

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

代码如下:

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>jQuery拖动剪裁图片作为头像代码 - 何问起</title>
  8. <link rel="stylesheet" href="css/style.css" type="text/css" />
  9. </head>
  10. <body>
  11. <div class="hovertreecontainer">
  12.   <div class="imageBox">
  13.     <div class="thumbBox"></div>
  14.     <div class="spinner" style="display: none">Loading...</div>
  15.   </div>
  16.   <div class="action">
  17.     <div class="new-contentarea tc">
  18.         <a href="javascript:void(0)" class="upload-img">
  19.             <label for="upload-file">上传图像</label>
  20.       </a>
  21.       <input type="file" class="" name="upload-file" id="upload-file" />
  22.     </div>
  23.     <input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">
  24.     <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
  25.     <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
  26.   </div>
  27.   <div class="cropped"></div>
  28. </div>
  29.  
  30. <script src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
  31. <script type="text/javascript" src="js/cropbox.js"></script>
  32. <script type="text/javascript">
  33. $(window).load(function() {
  34.     var options =
  35.     {
  36.         thumbBox: '.thumbBox',
  37.         spinner: '.spinner',
  38.         imgSrc: 'img/rgevo2ea.jpg'
  39.     }
  40.     var cropper = $('.imageBox').cropbox(options);
  41.     $('#upload-file').on('change', function(){
  42.         var reader = new FileReader();
  43.         reader.onload = function(e) {
  44.             options.imgSrc = e.target.result;
  45.             cropper = $('.imageBox').cropbox(options);
  46.         }
  47.         reader.readAsDataURL(this.files[0]);
  48.         this.files = [];
  49.     })
  50.     $('#btnCrop').on('click', function(){
  51.         var img = cropper.getDataURL();
  52.         $('.cropped').html('');
  53.         $('.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>');
  54.         $('.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>');
  55.         $('.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>');
  56.     })
  57.     $('#btnZoomIn').on('click', function(){
  58.         cropper.zoomIn();
  59.     })
  60.     $('#btnZoomOut').on('click', function(){
  61.         cropper.zoomOut();
  62.     })
  63. });
  64. </script>
  65.  
  66. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  67. <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
  68. <p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjaf/7x8ev3fh.htm" target="_blank">说明</a></p>
  69. </div>
  70. </body>
  71. </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. 解决 Could not find com.android.tools.build:gradle 问题

    今天拉同事最新的代码,编译时老是报如下错误: Error:Could not find com.android.tools.build:gradle:2.2.0.Searched in the fol ...

  2. ubuntu14.04下安装node.js

    在网上查了下,起初是下载了一个node-v0.12.7-linux-x64.tar.gz,解压在/home/node路径下,然后在/etc/profile中添加如下命令: export NODE_HO ...

  3. 【Java并发编程实战】----- AQS(一)：简介

    在前面博客中,LZ讲到了ReentrantLock.ReentrantReadWriteLock.Semaphore.CountDownLatch,他们都有各自获取锁的方法,同时相对于Java的内置锁 ...

  4. iOS 开发不可缺少的工具

    1.截屏利器:Snip 强大的滚动截屏功能,你值得拥有! Snip.png 传送门:http://www.snip.qq.com/ 2.Mac上最好的终端模拟器:iTerm2 iTeam.png 传送 ...

  5. ASP.NET MVC Bundle使用 合并压缩

    2017-01-06 更新 在 BundleCollection 的构造函数中添加了 3种默认规则 public BundleCollection() { BundleCollection.AddDe ...

  6. iOS----调试技巧，让你的开发事半功倍

    NSLog,po命令和普通断点调试相信每个iOS开发者都会,这里就不作介绍了. 一.Memory Graph Xcode8新增:Memory Graph解决闭包引用循环问题 这个时候就进入了断点模式, ...

  7. 修改Coney主题之侧边栏移位

    title: 修改Coney主题之侧边栏移位 date: 2014-12-15 18:09:54 categories: Hexo tags: [hexo,css] --- Coney是一个非常漂亮的 ...

  8. Android数据加密之Des加密

    前言: 端午节前有个同事咨询我有关Android DES加密的相关实现,简单的实现了一下,今天来总结一下. 其他几种加密方式: Android数据加密之Rsa加密 Android数据加密之Aes加密 ...

  9. 【知识积累】try-catch-finally+return总结

    一.前言 对于找Java相关工作的读者而言,在笔试中肯定免不了遇到try-catch-finally + return的题型,需要面试这清楚返回值,这也是这篇博文产生的由来.本文将从字节码层面来解释为 ...

  10. HTML5-video标签-实现点击预览图播放或暂停视频

    HTML5-video标签-实现点击预览图播放或暂停视频 刚刚参加工作,开始更多的接触到一些新的知识,促使我开始了解html5和css3的新特性.这时我才真的发现到html5和css3的强大. 之前关 ...