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 import css实例代码
Jul 18 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
mailto的使用技巧分享
Dec 21 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
基于JavaScript实现抽奖系统
2018/01/16 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
中国电视购物:快乐购
2017/02/04 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
安全标准化汇报材料
2014/02/03 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2014年车间工作总结
2014/11/21 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python