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 相关文章推荐
jQuery中prop()方法用法实例
Jan 05 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
javascript对象的创建和访问
Mar 08 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
正则表达式基础与常用验证表达式
Jun 16 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获取post中的json数据的实现方法
2011/06/08 PHP
php查询及多条件查询
2017/02/26 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
python super()函数的基本使用
2020/09/10 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
医药工作岗位求职信分享
2013/12/31 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
咖啡店创业计划书
2014/08/15 职场文书
优秀纪检干部材料
2014/08/27 职场文书
家长学校教学计划
2015/01/19 职场文书
2016公司新年问候语
2015/11/11 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python