jQuery实现拖动剪裁图片作为头像


Posted in Javascript onDecember 28, 2016

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

效果图:

jQuery实现拖动剪裁图片作为头像

需要引用的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://wd.3water.com:81//201612/yuanma/hovertreejqimg8_3water.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 事件的一些重要说明
Oct 25 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 #Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 #Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 #Javascript
AngularJS实现网站换肤实例
Feb 19 #Javascript
详解js树形控件—zTree使用总结
Dec 28 #Javascript
js 轮播效果实例分享
Dec 28 #Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 #Javascript
You might like
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python基础教程之字典操作详解
2014/03/25 Python
Python Tkinter基础控件用法
2014/09/03 Python
Python实时获取cmd的输出
2015/12/13 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python 如何对文件目录操作
2020/07/10 Python
python 如何调用远程接口
2020/09/11 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
北京SQL新华信咨询
2016/09/30 面试题
linux面试相关问题
2012/08/11 面试题
物流管理专业推荐信
2014/09/06 职场文书
2014年度党员自我评议
2014/09/13 职场文书
成绩单家长意见
2015/06/03 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
实现GO语言对数组切片去重
2022/04/20 Golang