功能：

1.通过jquery.form上传图片，并按一定比例显示预览图。

2.通过Jcrop裁剪图片，并显示裁剪预览图

3.通过CI的图像处理类保存剪切后图片

问题：

1.通过jquery.form来ajax提交file类的神奇问题

2.获取ajax加载图片后图片尺寸的问题

3.按比例伸缩图片

4.ajax获取图片后绑定Jcrop

5.CI中upload类注意事项

6.图片裁剪原理

html页面代码：

头像：

crop_photo.js代码：

//首先是保证jquery.form能ajax提交图片

!function($){

$(function(){

$("#form_photo").ajaxForm();//ajaxForm()只是绑定表单事件，并不是提交表单。。。

$("#button_photo").click(function(){

//判断上传格式，判断图片大小好像只能在服务端检测，所以预览图片必须先传上去

var options = {

success: showResponse,//上传成功回调函数

};

$("#form_photo").ajaxSubmit(options);//ajax上传图片，转由CI部分upload_photo

//方法处理。另外，我上传file一直没有成功

//过jquery.form官方文档中的submit()中再

//回调函数ajaxForm()的方式,这种方法ajax

//提交其它表单没问题

});

function showResponse(data){

//根据返回值判断上传是否成功

//成功返回图片路径

//jquery添加

//jquery添加

//现在开始准备

init_photo();//初始化jcrop

$("#button_photo").click(function(){

$("#save_photo").submit();//再次上传剪切后图片参数到CI部分save_photo方法 });

}

var photo_width = 292;//设置显示预览图片的最大尺寸

var photo_height = 292;

function init_photo(){

var k = 0;//记录图片伸缩比例

var screen_img = $("#jcrop_photo");//通过new_img获取ajax加载的图片

var new_img = new Image(); //直接获取ajax加载图片的尺寸有问题

new_img.src = screen_img.attr("src");//反正我是这样才获得了真实的尺寸

setTimeout(function(){ //由于图片加载时间，可能要通过

//挂起一段时间后才能读取图片尺寸

if((new_img.height/292) >= (new_img.width/292)){//限定长或宽最大为292

$("#jcrop_photo").css("height",292);

photo_width = Math.round(new_img.width*292/new_img.height);

$("#jcrop_photo").css("width",photo_width);

k = new_img.height/292;

}else{

$("#jcrop_photo").css("width",292);

photo_height = Math.round(new_img.height*292/new_img.width);

$("#jcrop_photo").css("height",photo_height);

k = new_img.width/292;

}

$("#p_k").val(k); //将伸缩比例传给hidden表单

$('#jcrop_photo').Jcrop({//绑定Jcrop到图片，必须在此刻绑定

onChange: show_preview,//剪切预览图 //这时候图片的DOM才被获取，不要在

onSelect: show_preview, //ready的时候绑定，也不要jquery添

aspectRatio: 1, //加

});

},100);

}

function show_preview(coords){ //显示剪切后图片预览

if (parseInt(coords.w) > 0){

var i_k = 146 / coords.w; //146为设置的预览图区域大小

$("#preview").css({

"height": (i_k * photo_height) + 'px', //Jcrop官方文档中给出的是

"width": (i_k * photo_width) + 'px', //指定的图片长宽，这也就是

"marginLeft": '-' + (i_k * coords.x) + 'px', //为什么要获得真实图片尺寸

"marginTop": '-' + (i_k * coords.y) + 'px',//的原因，具体图片原理见后文

}).show();

$("#p_x").val(coords.x);//将剪切位置传给hidden表单

$("#p_y").val(coords.y);

$("#p_h").val(coords.h);

$("#p_w").val(coords.w);

}

}

});

}(window.jQuery)

php代码

upload_photo方法 //ajax上传图片

$config['upload_path'] = './img/user_head';

$config['allowed_types'] = 'gif|jpg|png';

$config['max_size'] = '4096';

$config['encrypt_name'] = true;

$this->load->library('upload', $config);//加载upload类

if(!$this->upload->do_upload('photo_src')){ //一定要写表单对应字段

echo 0; //失败返回给ajax请求0

}else{

$data = $this->upload->data();

echo $data['file_name'];//成功后返回相对路径+图片名

}

save_photo方法//生产裁剪后图片

$config['image_library'] = 'gd2';

$config['source_image'] = $_POST['photo_url'];

$config['new_image'] = './img/user_head/'.'用户ID'.'.jpg';

$config['maintain_ratio'] = FALSE;//保证设置的长宽有效

$config['x_axis'] = $_POST['p_x']*$_POST['p_k']; //一定要乘以p_k，因为这里存放的

$config['y_axis'] = $_POST['p_y']*$_POST['p_k']; //是原图而不是浏览器上经过缩放的

$config['width'] = $_POST['p_w']*$_POST['p_k'];//的图

$config['height'] = $_POST['p_h']*$_POST['p_k'];

//$this->load->library('image_lib', $config);

if ( ! $this->image_lib->crop())

{

echo $this->image_lib->display_errors();

}else{

//裁剪完毕

}

至此已经完成图片上传并裁剪保存功能，下面图解一下图片裁剪原理

jcrop裁剪后预览原理

注意图片的边长应该是上传图片大小除以比例K，即p.h/k。这关系到后来服务器端裁剪图片。

c.x,c.y,c.h,c.w等为jcrop提供的参数，分别是裁剪点离原图片左上角x方向距离，y方向距离，裁剪高度，宽度。

对于显示裁剪区域图片，首先要把图片缩放，缩放比例为js代码中show_preview方法的i_k,然后移动位置，将放在