首页
所有分类
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 相关文章推荐
Mootools 1.2教程 选项卡效果（Tabs）
Sep 15 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 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
vue-esign(1) 蒙特卡罗(1) 指针(1) WeUI(1) pdfkit(1) 微信小程序(9) Pillow(2) map(4) bufio(1) 结构体(1)
You might like
建立动态的WML站点(三)
2006/10/09 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
杨氏矩阵查找的JS代码
2013/03/21 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
Node.js中你不可不精的Stream（流）
2018/06/08 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
Python二分查找详解
2015/09/13 Python
python async with和async for的使用
2019/06/20 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
python将数据插入数据库的代码分享
2020/08/16 Python
小学生班会演讲稿
2014/01/09 职场文书
中秋晚会策划方案
2014/06/12 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
MySql数据库触发器使用教程
2022/06/01 MySQL