用JQuery仿造QQ头像裁剪功能
最近工作真心忙碌，几乎没时间写博客。今天趁周末来仿一个QQ头像裁剪功能插件。效果如下：
所有文件都可在我的Github上下载，从头到尾从简到繁按步骤一共分了9个HTML文件，每个步骤文件里的注释都写的很清楚，故在本博客内不赘述。
原理：
主要是通过css的clip来裁剪图片可视区域，拖动剪裁窗口这里使用了JQ-UI的draggable插件（但是缩放没有，贪方便可以使用Resizable插件，但都用插件的话就没有研究的意义了）。
缩放功能原理其实很简单，不外乎获取剪裁框的offset()或position()，以及各容器宽高、鼠标位置，然后做个大杂侩计算。
只能说咱做前端的必须要认真耐心地去做计算，虽然过程颇为麻烦，但绝对不是“做不出来”。有的朋友在做某些功能前，可能会因为需要涉及较麻烦的计算就放弃，这是不靠谱的做法。
P.S.：像效果图中会存在图片被选中（变蓝色）的情况，是因为本章直接用的img，如果不喜欢这种图片被选中的情况，可以用一个div直接设置背景替换img即可（不过这里得使用background-size:100% 100%，如果不考虑IE8-的话，利用这种方法交互视觉上感觉会更好些）
贴一下最终版的代码，想要从头看起的朋友可以去我上方提供的连接查看。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>裁剪头像</title>
<script src="jq.js"></script>
<script src="draggable.js"></script>
<style type="text/css">
body {background-color: #333;}
.pic_wrap{ position:relative; float:left;margin:100px; width:320px; height:320px; background:black; }
.pic_wrap img{position:absolute;width:320px; height:320px;}
.pic1{opacity:0.5;}
.pic2{clip:rect(0 150px 150px 0);}
.clip_box{position:absolute; margin-left:-1px; margin-top:-1px;width:150px; height:150px; border:solid 1px white; cursor:move;}
.clip_box span{display:block; position:absolute; width:8px; height:9px; background:white; border-radius:4px;}
#lt{left:-4px; top:-4px; cursor:nw-resize;}
#rt{right:-4px; top:-4px; cursor:ne-resize}
#lb{left:-4px; bottom:-4px; cursor:sw-resize}
#rb{right:-4px; bottom:-4px; cursor:se-resize}
.preview{ margin-top:100px; position:relative; float:left;width:100px; height:100px; overflow:hidden;}
.pic3{ position:absolute;}
</style>
<script type="text/javascript">
$(function(){
var $picWrap = $("#pic_wrap");
var $rawPic = $picWrap.find("img:eq(0)");
var $clipPic = $picWrap.find("img:eq(1)");
var $clipBox = $("#clip_box");
var $prePic = $("#pic3"); //获取预览图
var prebox_w = $("#preview").width(); //获取预览图容器宽度/高度
var $lt = $("#lt");
var $rt = $("#rt");
var $lb = $("#lb");
var $rb = $("#rb");
var wrap_w = $picWrap.width();
var isResize = !1;
var flag = "";
$lt.mousedown(function(e){
e.stopPropagation();
isResize=!0;
flag = "leftTop";
})
$rt.mousedown(function(e){
e.stopPropagation();
isResize=!0;
flag = "rightTop";
})
$lb.mousedown(function(e){
e.stopPropagation();
isResize=!0;
flag = "leftDown";
})
$rb.mousedown(function(e){
e.stopPropagation();
isResize=!0;
flag = "rightDown";
})
$(window).mouseup(function(){
isResize=!1;
flag = "";
})
$clipBox.find("span").mousemove(function(e){
e.stopPropagation();
})
$clipBox.draggable({
containment: "#pic_wrap",
drag: function(){
setClip();
},
stop: function(){
var box_pl = $clipBox.position().left;
var box_pt = $clipBox.position().top;
var box_w = $clipBox.width();
if(box_pl+box_w>wrap_w){
var l = wrap_w - box_w;
$clipBox.css("left",l);
}
if(box_pt+box_w>wrap_w){
var t = wrap_w - box_w;
$clipBox.css("top",t);
}
setClip();
}
});
$picWrap.mousemove(function(e){
if(isResize){
var x = e.pageX;
var y = e.pageY;
switch(flag){
case "leftTop":leftTop(x);console.log("aa");break;
case "rightTop":rightTop(y);break;
case "leftDown":leftDown(x);break;
case "rightDown":rightDown(y);break;
default: break;
}
}
})
function leftTop(x){
var box_ol = $clipBox.offset().left;
var box_pl = $clipBox.position().left;
var box_pt = $clipBox.position().top;
var box_w = $clipBox.width();
var s = x - box_ol;
var newLeft = box_pl + s;
var newWidth = box_w - s;
var newTop = box_pt + s;
newLeft = newLeft<=0?0:newLeft;
newTop = newTop<=0?0:newTop;
if(newTop+newWidth>=wrap_w){
newWidth = newWidth<8?8:newWidth;
newLeft = newLeft+newWidth>wrap_w?newLeft-8:newLeft;
newTop = wrap_w - newWidth;
}
if(newLeft+newWidth>=wrap_w-8){
newWidth = newWidth<8?8:newWidth;
newLeft = wrap_w - newWidth;
}
$clipBox.css({"left":newLeft,"width":newWidth,"height":newWidth,"top":newTop}); setClip();
}
function rightTop(y){
var box_ot = $clipBox.offset().top;
var box_pt = $clipBox.position().top;
var box_pl = $clipBox.position().left;
var box_h = $clipBox.height();
var s = y - box_ot;
var newTop = box_pt + s;
var newHeight = box_h - s;
newTop = newTop<=0?0:newTop;
if(newHeight+box_pl>=wrap_w){
return false;
}
$clipBox.css({"top":newTop,"width":newHeight,"height":newHeight});
setClip();
}
function leftDown(x){
var box_ol = $clipBox.offset().left;
var box_pl = $clipBox.position().left;
var box_pt = $clipBox.position().top;
var box_w = $clipBox.width();
var s = x - box_ol;
var newLeft = box_pl + s;
var newWidth = box_w - s;
newLeft = newLeft<=0?0:newLeft;
if(newWidth+box_pt>=wrap_w){
return false;
}
$clipBox.css({"left":newLeft,"width":newWidth,"height":newWidth});
setClip();
}
function rightDown(y){
var box_ot = $clipBox.offset().top;
var box_pl = $clipBox.position().left;
var newHeight = y - box_ot;
if(newHeight+box_pl>=wrap_w){
return false;
}
$clipBox.css({"width":newHeight,"height":newHeight});
setClip();
}
function setClip(){
var t = $clipBox.position().top;
var r = $clipBox.position().left + $clipBox.width();
var b = $clipBox.position().top + $clipBox.height();
var l = $clipBox.position().left;
var rect = "rect("+t+"px "+r+"px "+b+"px "+l+"px)";
$clipPic.css("clip",rect);
//预览图设置
var w = $clipBox.width();
var pre_w = prebox_w / w * wrap_w ; //存在比例 prebox_w / pre_w = w / wrap_w
var pre_t = pre_w / wrap_w *t; //存在比例 pre_t / t = pre_w / wrap_w
var pre_r = pre_w / wrap_w *r; //存在比例 pre_r / r = pre_w / wrap_w
var pre_b = pre_w / wrap_w *b; //存在比例 pre_b / b = pre_w / wrap_w
var pre_l = pre_w / wrap_w *l; //存在比例 pre_l / l = pre_w / wrap_w
var prect = "rect("+pre_t+"px "+pre_r+"px "+pre_b+"px "+pre_l+"px)";
$prePic.css({"width":pre_w,"height":pre_w,"clip":prect,"left":-pre_l,"top":-pre_t});
}
setClip();
})
</script>
</head>
<body>
<div class="pic_wrap" id="pic_wrap">
<img class="pic1" src="logo.jpg" />
<img class="pic2" src="logo.jpg" />
<div class="clip_box" id="clip_box">
<span id="lt"></span>
<span id="rt"></span>
<span id="lb"></span>
<span id="rb"></span>
</div>
</div> <div id="preview" class="preview">
<img class="pic3" id="pic3" src="logo.jpg" />
</div>
</body>
</html>
共勉~
用JQuery仿造QQ头像裁剪功能的更多相关文章
- jQuery实现用户头像裁剪插件cropbox.js
几乎每一个网页是必备图片上传,图片裁剪功能,这里通过cropbox.js插件实现该功能. <script src="js/jquery-1.11.1.min.js">& ...
- Android 实现最新版QQ图像裁剪功能
这是依据翔神那篇高仿微信图像截取改的 能够先去看 Android 高仿微信头像截取 打造不一样的自己定义控件 这篇文章. 眼下还有个小问题.就是截取成圆形图片之后 会有黑色的边框填充.不知道怎么解 ...
- Vue 之 vue-cropper 组件实现头像裁剪功能
组件与api地址: npm地址地址:https://www.npmjs.com/package/vue-cropper/v/0.4.7 GitHub地址:https://github.com/xyxi ...
- jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...
- Android实现类似换QQ头像功能(图片裁剪)
现在几乎所有的App都有用户登录模块,需要设置用户头像,而关于用户头像部分无疑也是比较头疼的,目前大部分应用的头像部分会有两种方式:一种是利用系统的裁剪功能去获取用户头像,一种就是获取到图片或者照片的 ...
- android 设置头像以及裁剪功能
在android的开发过程中,经常遇到设置用户头像以及裁剪图像大小的功能.昨天我遇到了设置用户头像的功能,开始不知道怎么搞,在技术群里问也没人回 答,就研究了微信用户设置头像的功能,了解到用户设置图像 ...
- 基于jQuery头像裁剪插件cropbox
今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...
- struts2+jsp+jquery+Jcrop实现图片裁剪并上传
<1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...
- 如何用CropBox实现头像裁剪并与java后台交互
如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...
随机推荐
- Java hashCode() 和 equals()的若干问题
原文:http://www.cnblogs.com/skywang12345/p/3324958.html 本章的内容主要解决下面几个问题: 1 equals() 的作用是什么? 2 equals() ...
- SQL Server日期时间格式转换字符串详解 （详询请加qq：2085920154）
在SQL Server数据库中,SQL Server日期时间格式转换字符串可以改变SQL Server日期和时间的格式,是每个SQL数据库用户都应该掌握的.本文我们主要就介绍一下SQL Server日 ...
- Spring.Scheduling.Quartz 作业的应用（定时任务和循环触发任务）
.定时任务的实现,比如有个任务是要晚上2点10分的时候要去触发的,先定义这个任务类RskBookFilterInitDiningService.cs,这里其实有两种实现,一种是需要继承QuartzJo ...
- python json模块
import json dic = {"name":"liao","age":18} data = json.dumps(dic) #转化为 ...
- SVN系统的几个术语
SVN系统的几个术语 User:用户,可以远程连接到SVN服务器的权限实体. User Group:用户组,用于管理一组权限相同的用户. Repository:版本库,在服务器端保存着的项目中所有的文 ...
- 配置Chrome Driver
书中使用Firefox driver出现莫名问题,大概是firefox的版本太新了,懒得降级处理,故学习配置Chome driver进行测试. 1.到http://chromedriver.stora ...
- 读书笔记——body and html
在看<常见标签的默认属性值及相互作用——关于CSS reset的思考>的时候,其中说body默认的margin是8px.但是,将body的backgound-color:red:后,看到的 ...
- C# 如何给sql数据库的日期字段插入空值
在C#中声明日期变量时用SqlDateTime类型,引用:using System.Data.SqlTypes; 例子:user.AbortDate = SqlDateTime.Null;
- k-sum问题
给定一个数组,里面的是任意整数,可能有重复,再给定一个目标T,从数组中找出所有和为T的K个数,要求结果中没有重复. Note: Elements in a quadruplet (a,b,c,d) m ...
- 为什么LTE系统的最小时间单位是Ts?
之前一直在做LTE物理层相关的工作,一直有个疑惑, 在36.211开头的一章定义Ts的大小是1/(15000*2048)s,为什么定义这么一个奇怪的unit time. 最近才反应过来,这跟FFT/I ...