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

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)
 },
 });
 })
 })

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