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

2024-10-27 22:46:39

1.自定义宽高效果

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.宽高比例固定效果

代码：

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

3.头像裁剪效果

代码：

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

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

jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

网页端裁剪图片,不需要经过服务器. 这个是用 https://github.com/mailru/FileAPI 框架实现的.配合jcrop. 高级浏览器使用 canvas 裁剪,ie6 7 8使用 flash过度. 核心代码: var el = $('input').get(0); seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){ FileAPI.event.o
利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果. 3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ［"区域":是宽*高,也就是面积:] ［"放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数］一.怎么能放大或者缩小图片的局部?
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例

本文介绍了头像裁剪上传功能,用到的技术有 jQuery,springmvc,裁剪插件用的是jcrop(中间遇到很多坑,最终跨越). 图片上传步骤: 1.用户选择图片 2.将图片传入后台:用户选择图片的时候选择的是各种各样的,但是我们的网页显示图片大小是有限的,所以我们就要在用户选择图片之后将图片添加到后台进行压缩,压缩成我们想要的大小,之后再显示到页面才好 3.利用jcrop裁剪工具对图片进行裁剪并且实时预览 4.点击确定按钮将裁剪用到的参数传入后台,后台图片进行剪切,之后缩放成我们需要的格式
基于JQuery实现的图片自动进行缩放和裁剪处理

其实很早就想写一个这样的效果,至于原因?进来这个笔记,我相信你懂的.一般门户网站,缺少不了大量的图片展示,而为了网站美观,图片又有各种不同尺寸,专业的网站编辑人员,会把图片处理成等比例的图片再上传,把网站弄得很好看,可惜,我想说,我遇到90%的网站编辑人员都是不专业的.为了不让网站编辑人员毁掉我的心血,我决定做这样一个事情. 1.首先,在CSS里对图片定义好大小,如果JS不执行,就能看到拉伸的图片,也就是最正常的表现:2.对每个定义图片大小的CSS多定义一个不常用的容器,这里我选用了斜体标签<c
JQuery PHP图片在线裁剪实例

/ * Goofy 2011-11-29 * 图像处理:根据传递过来的坐标参数,x,y,w,h,依次为选取的x坐标,y坐标,w宽度,h高度通过imagecopy()方法将该区域copy至第一步创建的空白图像中注意,在创建图像的时候要用imagecreatetruecolor()真彩色,不然用imagecreate()图片会失真 */ 自由图片剪切无比例 <?php /** * Goofy 2011-11-29 * 图像处理:根据传递过来的坐标参数,x,y,w,h,依次为选取的x坐标,y坐标
JQuery Jcrop 实现图片裁剪的插件

效果如下图请"运行代码"先试下运行,运行后请刷新一次,感受下: body{ margin:100px auto; text-align:center; } .jcrop-holder { text-align: left; } .jcrop-vline, .jcrop-hline{ font-size: 0; position: absolute; background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') t
jQuery实现图片上传和裁剪插件Croppie

在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求.最常见的就是各用户系统要求用户上传和裁剪头像的应用.今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie. 运行效果图: HTML 首先我们将相关js和css文件载入head中. <script src="jquery.min.js"></script> <script src="croppie.min.js"><
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)

正文:为了使层次分明及便于阅读, 整个解决方案如下: 其中BitmapCutter.Core是图片的服务器端处理程序, 类图为: 简单说明下, 更多说明可查看源码注释 : Cutter为裁剪对象, 用于存储客户端通过AJAX提交的数据. Helper为图片处理类, 包括图片翻转(RotateImage()), 图片裁剪(GenerateBitmap()). Callback为服务器端图片处理类, 通过使用Cutter封装客户端AJAX提交的数据, 然后调用Helper中的方法来完成图片处理.
jquery实现图片裁剪思路及实现

思路:JS,jquery不能实现图片的裁剪,只是显示了一个假象我的实现的方式大体如下: 1.将用户选中的图片上传到服务器 2.将选中头像的矩形框在图片上的坐标发送到服务器,包括,矩形框的宽,高,左上角的x,y坐标,图片的高,宽等 3.在服务器上用获得的各个坐标值,以及原始图片,用JAVA进行裁剪. ----------------------------------- jquery 裁剪效果显示,利用imgAreaSelect http://odyniec.net/projects/imgar
js+jquery实现图片裁剪功能

现在我们在使用各大网站的个人中心时,都有个上传个人头像的功能.用户在上传了个人照片之后,可能不符合网站的要求,于是要求用户对照片进行裁剪,最终根据用户裁剪的尺寸生成头像.这个功能真是太棒了,原来不懂js的时候,感觉很神奇,太神奇了.心想哪天要是自己也能搞明白这里面的技术,那该多牛呀~大家是不是也有何我一样的想法呀~哈哈~~ 下面我们就来用javascript来实现这个功能吧. 复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.

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

相关推荐

随机推荐