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学习笔记(二) js对象
Oct 25 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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 如何向 MySQL 发送数据
2006/10/09 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
Python列表如何更新值
2020/05/27 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
辩论赛主持词
2014/03/18 职场文书
营销学习心得体会
2014/09/12 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
欢迎新生标语
2014/10/06 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书