jQuery实现拖动剪裁图片作为头像_网络技术_宿州市腾雀网络科技有限公司

jQuery实现拖动剪裁图片作为头像

发布时间 - 2026-01-10 22:10:31 点击率：次

图片上传是许多网站的一个常用的功能，有时需要对上传的图片做初步的选择裁剪，比如上传头像。下面就是一个使用HTML5+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.:81//201612/yuanma/hovertreejqimg8_jb51.rar

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# jquery # 拖动 # 图片剪裁 # jquery实现拖动效果 # jQuery动态添加可拖动元素完整实例(附demo源码下载) # 使用jQuery的easydrag插件实现可拖动的DIV弹出框 # jQuery实现简单的DIV拖动效果 # jQuery实现div随意拖动的实例代码(通用代码) # jQuery实现移动端滑块拖动选择数字效果 # jQuery实现分隔条左右拖动功能 # jQuery实现单击弹出Div层窗口效果(可关闭可拖动) # jquery实现鼠标拖动图片效果示例代码 # jquery 图片缩放拖动的简单实例 # jQuery拖动图片删除示例 # 上传 # 源码下载 # 图片上传 # 都有 # 不支持 # 要对 # 以对 # 还需 # 搜狗 # 时需 # 傲游 # 世界之窗 # link # title # rel # UA # edge # stylesheet # scale

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：YII框架的中间件是什么？YII框架如何使用中间件？

下一篇：自助建站是什么？无需技术基础如何操作？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：YII框架的中间件是什么？YII框架如何使用中间件？

下一篇：自助建站是什么？无需技术基础如何操作？