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 tools系列 expose 学习
Sep 06 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 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中var_export与var_dump的区别分析
2010/08/21 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
PHP中list方法用法示例
2016/12/01 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
浅谈JavaScript数据类型
2015/03/03 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python编码类型转换方法详解
2016/07/01 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
python之django母板页面的使用
2018/07/03 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
留守儿童工作方案
2014/06/02 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
结婚仪式主持词
2015/06/29 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技