首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery实现自定义图片裁剪功能【推荐】

Posted in Javascript onMarch 08, 2017

1.自定义宽高效果

jquery实现自定义图片裁剪功能【推荐】

1.html 代码  index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<img class="source" src="./test2.jpg" alt="">
<img src="" class="target" alt="">
</body>
</html>

2.添加插件代码

(function ($) {
 $.fn.photoCrop=function (option) {
 var opt={
 img:'',
 fixedScale:9/5,
 isHead:null,
 maxWidth:'1400',
 maxHeight:'800',
 callBack:function () {}
 }
 opt=$.extend(opt,option);
 var _this=this;
 var imgSrc=opt.img ? opt.img:_this.attr('src');
 var photoCropBox=$('<div id="photoCropBox" style="position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.5);z-index: 99999;padding: 20px;">' +
 '<canvas id="cropCanvas" style="position: absolute;opacity:1;left: 0;top: 0;z-index: 100"></canvas><img id="dataImg" src="'+imgSrc+'" style="opacity: 0;position: absolute" alt=""><div id="photoCropBox-panel-box" style="position: relative;width: 100%;height: 100%;">' +
 '<div id="photoCropBox-panel" style="opacity:0;background: #eee;border-radius: 5px;max-width: '+opt.maxWidth+'px;max-height: '+opt.maxHeight+'px;position: absolute;text-align: center"><div id="photoCropBox-img" style="margin: 40px 60px 20px;display: inline-block;position: relative">' +
 '<img src="'+imgSrc+'" style="max-width: 100%;display: block;max-height: 100%;max-height: '+(opt.maxHeight-110)+'px;" alt=""></div><div id="photoCropBox-option" style="text-align: right;padding-right: 50px;padding-bottom: 20px;position: relative;z-index: 2"><span id="photoCropBox-end">裁剪</span><span id="photoCropBox-start">手动裁剪</span><span id="photoCropBox-cancel">取消</span></div></div>' +
 '</div></div>');
 $('body').append(photoCropBox);
 var _box=$('#photoCropBox-img');
 var imgWidth=_box.find('img').width();
 $('#photoCropBox-option span').css({
 lineHeight:'30px',
 background:'#000',
 color:'#fff',
 display:'inline-block',
 paddingLeft:'20px',
 paddingRight:'20px',
 marginRight:'5px',
 cursor:'pointer'
 })
 var cropBox=$('<div id="photoCropBox-cropBox" style="position: absolute;z-index: 5;cursor: Move;display: none">' +
 '<div id="cropBoxLine" style="overflow: hidden;position: absolute;width: 100%;height: 100%;">' +
 '<img src="'+imgSrc+'" style="display: block;width: '+_box.find('img').width()+'px;position: absolute;max-height: none;max-width: none" alt="">' +
 '<div class="top line" style="width: 100%;height: 1px;top: 0;left: 0;"></div><div class="right line" style="height: 100%;width: 1px;top: 0;right: 0"></div>' +
 '<div class="line bottom" style="width: 100%;height: 1px;bottom: 0px;left: 0"></div><div class="left line" style="height: 100%;width: 1px;top: 0;left: 0"></div></div>' +
 '<div id="cropBoxLine2"><div class="left line2" style="height: 100%;width: 1px;top: 0;left: 0;cursor: w-resize"></div><div class="right line2" style="height: 100%;width: 1px;top: 0;right: 0;cursor: e-resize"></div><div class="top line2" style="width: 100%;height: 1px;top: 0;left: 0;cursor: n-resize;position: absolute"></div><div class="bottom line2" style="width: 100%;height: 1px;bottom: 0px;left: 0;cursor: s-resize"></div>' +
 '<div class="left bot" style="left: -3px;top: 50%;margin-top: -4px;cursor: w-resize"></div><div class="right bot" style="right: -3px;top: 50%;margin-top: -4px;cursor: e-resize"></div><div class="bottom bot" style="bottom: -3px;left: 50%;margin-left: -4px;cursor: s-resize"></div><div class="top bot" style="top: -3px;left: 50%;margin-left: -4px;cursor: n-resize"></div>' +
 '<div class="left-top bot" style="left: -3px;top: -3px;cursor: nw-resize"></div><div class="left-bottom bot" style="left: -3px;bottom: -3px;cursor: sw-resize"></div><div class="right-top bot" style="right: -3px;top: -3px;cursor: ne-resize"></div><div class="right-bottom bot"style="right: -3px;bottom: -3px;cursor: se-resize"></div></div></div>');
 var screen=$('<div id="photoCropBox-bg" style="background: rgba(0,0,0,.5);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 4;cursor: crosshair;display: none"></div>')
 _box.append(cropBox);
 _box.append(screen);
 var _corp=$('#photoCropBox-cropBox');
 var cropBoxLine=$('#cropBoxLine');
 setTimeout(function () {
 console.log(imgWidth)
 cropBoxLine.find('img').css('width',_box.find('img').width()+'px')
 },20)
 if(opt.isHead){
 cropBoxLine.css({borderRadius:'100%'})
 }
 $('#photoCropBox-cropBox .line,#photoCropBox-cropBox .line2').css({
 background:'url(./img/Jcrop.gif)',
 position:'absolute',
 opacity:.5
 })
 $('#photoCropBox-cropBox .bot').css({
 background:'rgba(0,0,0,0.5)',
 position:'absolute',
 width:7,
 height:7,
 border:'1px #999 solid'
 })
 setTimeout(function () {
 init();
 },10)
 $(window).on('resize',function () {
 setPosition();
 })
 $('#photoCropBox-cancel').on('click',function () {
 closeBox();
 })
 $('#photoCropBox-bg').on('mousedown',function (e) {
 if(opt.fixedScale) return //固定
 $('#cropBoxLine2').hide();
 var _this=$(this);
 var _sx=e.pageX,_sy=e.pageY;
 var _tx=_this.offset().left;
 var _ty=_this.offset().top;
 $(document).on('mousemove',function (e) {
 e.preventDefault();
 var _ex=e.pageX,_ey=e.pageY;
 getPosition(_ex,_ey,_ty,_tx,_sx,_sy,_this)
 })
 $(document).on('mouseup',function () {
 $(document).unbind('mousemove');
 $('#cropBoxLine2').show();
 })
 })
 var lock=false;
 _corp.on('mousedown',function (e) {
 if(lock){return}
 var _sx=e.pageX,_sy=e.pageY;
 var pW=$('#photoCropBox-bg').width(),pH=$('#photoCropBox-bg').height();
 var _this=$(this),_thisX=parseInt(_this.css('left')),_thisY=parseInt(_this.css('top')),_thisW=parseInt(_this.css('width')),_thisH=parseInt(_this.css('height'));
 $(document).on('mousemove',function (e) {
 e.preventDefault();
 var _ex=e.pageX,_ey=e.pageY;
 var _x=_ex-_sx,_y=_ey-_sy;
 _x+=_thisX;_y+=_thisY;
 if(_x<0) _x=0;
 if(_y<0) _y=0;
 if(_y>pH-_thisH) _y=pH-_thisH;
 if(_x>pW-_thisW) _x=pW-_thisW;
 resizeCropBox("","",_y,_x,true)
 })
 $(document).on('mouseup',function () {
 $(document).unbind('mousemove');
 })
 })
 //控制大小
 $('#cropBoxLine2 .bot').on("mousedown",function (e) {
 lock=true;
 var _esx=e.pageX,_esy=e.pageY;
 var _that=$(this);
 var _this=$('#photoCropBox-bg');
 var _tx=_this.offset().left;
 var _ty=_this.offset().top;
 var _sx=_corp.offset().left,_sy=_corp.offset().top;//裁剪框
 if(_that.hasClass('right-top')) _sy+=_corp.height();
 if(_that.hasClass('left-top')){
 _sy+=_corp.height();
 _sx+=_corp.width();
 }
 if(_that.hasClass('left-bottom')) _sx+=_corp.width();
 $(document).on('mousemove',function (e) {
 e.preventDefault();
 var _ex=e.pageX,_ey=e.pageY;
 if(opt.fixedScale){
 _ey=(_ex-_esx)/opt.fixedScale+_esy;
 if(_that.hasClass('right-top') || _that.hasClass('left-bottom')){
 _ey=(_esx-_ex)/opt.fixedScale+_esy;
 }
 }
 getPosition(_ex,_ey,_ty,_tx,_sx,_sy,_this)
 })
 $(document).on('mouseup',function () {
 $(document).unbind('mousemove');
 lock=false;
 })
 }) $('#cropBoxLine2 .left,#cropBoxLine2 .top,#cropBoxLine2 .right,#cropBoxLine2 .bottom').on('mousedown',function (e) {
 if(opt.fixedScale) return //固定
 lock=true;
 var _that=$(this);
 var _this=$('#photoCropBox-bg');
 var _tx=_this.offset().left;//
 var _ty=_this.offset().top;
 var _sx=_corp.offset().left,_sy=_corp.offset().top;
 var ch=_corp.height(),cw=_corp.width();
 if(_that.hasClass('top')){
 _sy+=ch;
 }else if(_that.hasClass('left')) {
 _sx+=cw;
 }
 $(document).on('mousemove',function (e) {
 e.preventDefault();
 var _ex=e.pageX,_ey=e.pageY;
 if(_that.hasClass('top') || _that.hasClass('bottom')){
 if(!(_ey-_sy>0)){
 var _x=_sx-_tx,_y=_ey-_ty,_w=cw,_h=-(_ey-_sy);
 if(_y<0) {_y=0;_h=_sy-_ty;}
 }else{
 var _x=_sx-_tx,_y=_sy-_ty,_w=cw,_h=_ey-_sy;
 if(_h>_this.height()-_y) _h=_this.height()-_y;
 }
 }else {
 if(_ex-_sx>0 && _ey-_sy>0){
 var _x=_sx-_tx,_y=_sy-_ty,_w=_ex-_sx,_h=ch;
 if(_w>_this.width()-_x) _w=_this.width()-_x;
 }else if(!(_ex-_sx>0) && _ey-_sy>0){
 var _x=_ex-_tx,_y=_sy-_ty,_w=-(_ex-_sx),_h=ch;
 if(_x<0) {_x=0;_w=_sx-_tx;}
 }
 }
 resizeCropBox(_w,_h,_y,_x);
 })
 $(document).on('mouseup',function () {
 $(document).unbind('mousemove');
 lock=false;
 })
 })
 $('#photoCropBox-start').on('click',function () {
 _corp.css('display','block')
 $('#photoCropBox-bg').css('display','block')
 })
 $('#photoCropBox-end').on('click',function () {
 getImage()
 closeBox()
 })
 function init() {
 setPosition()
 if(opt.fixedScale){
 if((_box.height()-_box.width()/opt.fixedScale/2)<0){
 resizeCropBox(_box.height()*opt.fixedScale,_box.height(),0,(_box.width()-_box.height()*opt.fixedScale)/2)
 }else {
 resizeCropBox(_box.width()/2,_box.width()/opt.fixedScale/2,(_box.height()-_box.width()/opt.fixedScale/2)/2,_box.width()/4)
 }
 }else {
 resizeCropBox(_box.width()/2,_box.height()/2,_box.height()/4,_box.width()/4)
 }
 if(opt.fixedScale) {
 $('.bot.top,.bot.left,.bot.bottom,.bot.right').remove();//固定
 }
 }
 function setPosition() {
 $('#photoCropBox-panel').css({
 top:($('#photoCropBox-panel-box').height()-$('#photoCropBox-panel').height())/2+'px',
 left:($('#photoCropBox-panel-box').width()-$('#photoCropBox-panel').width())/2+'px',
 opacity:1
 })
 }
 //结束x,y 背景x,y
 function getPosition(_ex,_ey,_ty,_tx,_sx,_sy,_this) {
 if(_ex-_sx>0 && _ey-_sy>0){
 var _x=_sx-_tx,_y=_sy-_ty,_w=_ex-_sx,_h=_ey-_sy;
 if(_w>_this.width()-_x) _w=_this.width()-_x;
 if(_h>_this.height()-_y) _h=_this.height()-_y;
 }else if(!(_ex-_sx>0) && _ey-_sy>0){
 var _x=_ex-_tx,_y=_sy-_ty,_w=-(_ex-_sx),_h=_ey-_sy;
 if(_x<0) {_x=0;_w=_sx-_tx;}
 if(_h>_this.height()-_y) _h=_this.height()-_y;
 }else if(!(_ex-_sx>0) && !(_ey-_sy>0)){
 var _x=_ex-_tx,_y=_ey-_ty,_w=-(_ex-_sx),_h=-(_ey-_sy);
 if(_x<0) {_x=0;_w=_sx-_tx;}
 if(_y<0) {_y=0;_h=_sy-_ty;}
 }else if(_ex-_sx>0 && !(_ey-_sy>0)){
 var _x=_sx-_tx,_y=_ey-_ty,_w=_ex-_sx,_h=-(_ey-_sy);
 if(_y<0) {_y=0;_h=_sy-_ty;}
 if(_w>_this.width()-_x) _w=_this.width()-_x;
 }
 if(opt.fixedScale){
 if(_w/opt.fixedScale>_h){
 _w=_h*opt.fixedScale
 }else if (_w<opt.fixedScale*_h){
 _h=_w/opt.fixedScale
 }
 }
 resizeCropBox(_w,_h,_y,_x);
 }
 var c=document.getElementById("cropCanvas");
 var ctx=c.getContext("2d");
 var img=$('#dataImg');
 function getImage() {
 var scale=$('#photoCropBox-img').width()/$('#dataImg').width();
 var sx=parseInt(_corp.css('left'))/scale;
 var sy=parseInt(_corp.css('top'))/scale;
 var swidth=parseInt(_corp.css('width'))/scale;
 var sheight=parseInt(_corp.css('height'))/scale;
 var c_img = new Image;
 c_img.onload = function () {
 ctx.drawImage(c_img,sx,sy,swidth,sheight,0,0,swidth,sheight);
 var url=c.toDataURL("image/jpeg");
 opt.callBack(url);
 };
 c_img.crossOrigin = 'anonymous'; //可选值：anonymous，*
 c_img.src = imgSrc
 c.width = swidth;
 c.height = sheight;
 }
 //宽，高,top,left,m-是否是拖拽
 function resizeCropBox(w,h,t,l,m) {
 _corp.css(prefix()+'transition','all 0s');
 if(!m){
 _corp.css({
 width:w,
 height:h,
 top:t+'px',
 left:l+'px'
 })
 }else {
 _corp.css({
 top:t+'px',
 left:l+'px'
 })
 }
 cropBoxLine.find('img').css({
 top:-t+'px',
 left:-l+'px'
 })
 }
 function closeBox() {
 $('#photoCropBox').remove();
 }
 function prefix() {
 var prefixes=['','-ms-','-moz-','-webkit-','-o-'],i=0;
 while (i < prefixes.length){
 if($('body').css(prefixes[i]+'transition')){
 return prefixes[i];
 }
 i++;
 }
 }
 }
 })(jQuery)　

3.绑定代码

$(function () {
 $('.source').on('click',function () {
 $(this).photoCrop({
 fixedScale:false,
 isHead:false,
 callBack:function(url){
 $('.target').attr('src',url)
 },
 });
 })
 
 })

2.宽高比例固定效果

jquery实现自定义图片裁剪功能【推荐】

代码：

$(function () {
 $('.source').on('click',function () {
 $(this).photoCrop({
 fixedScale:5/6,
 isHead:false,
 callBack:function(url){
 $('.target').attr('src',url)
 },
 });
 })
 })

3.头像裁剪效果

jquery实现自定义图片裁剪功能【推荐】

代码：

$(function () {
 $('.source').on('click',function () {
 $(this).photoCrop({
 fixedScale:1,
 isHead:true,
 callBack:function(url){
 $('.target').attr('src',url)
 },
 });
 })
 })

以上代码易修改，大家可以自行扩展。希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

jquery实现自定义图片裁剪功能【推荐】

- Author -

小结巴巴吧

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js中关于String对象的replace使用详解
May 24 Javascript
ECMAScript5中的对象存取器属性：getter和setter介绍
Dec 08 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
jQuery之动画效果大全
Nov 09 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
原生js实现日历效果
Mar 02 Javascript
bootstrap实现动态进度条效果
Mar 08 #Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 #Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 #Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 #Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 #Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 #Javascript
jquery仿ps颜色拾取功能
Mar 08 #Javascript
VOLVO(1) 军机(1) E1-XM(1) 矿石收音机(1) ETON(1) S900(1) 66-XI(1) 沃尔沃(1) R601SW(1) 放大器(1)
You might like
Terran魔法科技
2020/03/14 星际争霸
模仿OSO的论坛（三）
2006/10/09 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
十个Python程序员易犯的错误
2015/12/15 Python
python如何实现int函数的方法示例
2018/02/19 Python
网易有道2017内推编程题 洗牌（python）
2019/06/19 Python
Python中模块(Module)和包(Package）的区别详解
2019/08/07 Python
python opencv实现证件照换底功能
2019/08/19 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
美国花布包包品牌：Vera Bradley
2017/08/11 全球购物
PUMA澳大利亚官方网站：德国运动品牌
2018/10/19 全球购物
Spartoo美国：欧洲排名第一的在线时装零售商
2019/12/12 全球购物
英国时尚高尔夫服装购物网站：Trendy Golf
2020/01/10 全球购物
大型会议接待方案
2014/03/01 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
公司考勤管理制度
2015/08/04 职场文书
个人工作失误的保证书怎么写？
2019/06/21 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers