使用jcorp进行图片截取的两种方式

两种截取方式：

1：通过服务器进行截取。

2：使用canvas 画布进行本地的截取后上传服务器。

 

准备工作

下载jcorp插件

 

html页面代码

<div class="upload-head fr">

<p class="head-set-title">头像设置</p>

<div class="head-set-pic" style="width:140px;height:140px;overflow:hidden">

<img src="/static/images/head-set.jpg" id="picImg">

</div>

<p class="pdf-max">jpg,jpeg,png,BMP大小不超过5M</p>

<div class="upload-words"><span class="reletive-area"><input class="input-file" type="file" id="upload"><input type="hidden" name ="picture" id="picture"><a class="upload-btn" href="javascript:;">上传头像</a></span>

</div>

</div>

jcorp插件的使用

首先，在改变<input type="file">的src的时候触发事件

file为上传的图片，func为截取框点击确认的时候触发的方法
 

var changeHeadPic= function(file,func)

{

        if (file.files && file.files[0])

{

var reader = new FileReader();

reader.readAsDataURL(file.files[0]);

reader.onload = function (e) {

     //将弹框中显示的图片设置为上传的图片，进行显示

$('#cutimg').removeAttr('src');

$('#cutimg').attr('src', e.target.result);

       //将头像显示的图片设置为上传的图片，进行显示

$('#picImg').removeAttr('src');

$('#picImg').attr('src', e.target.result);

       //设置弹框中显示图片的高度为自动，宽度在样式中进行设置

$('#cutimg').css({

height:"auto"

});

//调用插件，进行截取

jcrop = $.Jcrop('#cutimg',{
                    //设置截取框的大小和起始位置

setSelect: [ 50, 50, 140, 140 ],

allowSelect:false,

bgOpacity:0.6,

dragEdges:true,
                    //规定宽高比例为1 即为正方形

aspectRatio: 1,
                    //移动截取框的事件

onSelect: updateCoords,

onChange: updateCoords

});

};

 

if(jcrop != undefined)
            {

jcrop.destroy();

}

if(typeof(func) == "function")

{

$("#change-pic").data("confirmFunction",func);

}
         //显示弹框 

$("#change-pic").show();

}

}

//移动截取框的事件

var updateCoords = function (c)

{

$('#x').val(c.x);

$('#y').val(c.y);

$('#w').val(c.w);

$('#h').val(c.h);

xsize = 140;

ysize = 140;

 

var rx = xsize / (c.w);

var ry = ysize / (c.h);

 

if(jcrop != undefined) {

var bounds = jcrop.getBounds();

boundx = bounds[0];

boundy = bounds[1];

}

if(boundx &&　boundy)

{
                 //设置移动截取框的时候，显示头像的变化

此处是通过img外部包裹的div的样式进行的控制。

<div class="head-set-pic" style="width:140px;height:140px;overflow:hidde