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中使用构造函数实现继承的代码
Aug 12 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
JavaScript 声明私有变量的两种方式
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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
koa-router源码学习小结
2018/09/07 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
Python实现栈的方法
2015/05/26 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python字符串反转的四种方法详解
2019/12/02 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
电子银行营销方案
2014/02/22 职场文书
建筑工程催款函
2015/06/24 职场文书
小学新课改心得体会
2016/01/22 职场文书