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

1.自定义宽高效果

1.html 代码  index.html

Title

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=$('

' +

'

' +

'

' +

'

裁剪 手动裁剪 取消

' +

'

');

$('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=$('

' +

'

' +

'' +

'

'

' +

'

'

'

');

var screen=$('

_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

_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)

},

});

})

})

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