Web端裁剪图片方法

<input id="image" type="file" name="image" />

     $.ajaxFileUpload({url: 'live/apply/uploadImage', //用于文件上传的服务器端请求地址type:'post',secureuri: false, //一般设置为falsefileElementId: image, //文件上传空间的id属性  dataType: 'json', //返回值类型 一般设置为jsondata:data, //可以传递图片属性及其他数据success: function (data, status)  //服务器成功响应处理函数{//上传传成功处理},error: function (data, status, e)//服务器响应失败处理函数{//上传失败处理}

    $("#myPhoto").Jcrop({onChange:showPreview,onSelect:showPreview,aspectRatio:1});    function showPreview(coords){if(parseInt(coords.w){//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到var rx = $("#preview_box").width() / coords.w; var ry = $("#preview_box").height() / coords.h;//通过比例值控制图片的样式与显示$("#crop_preview").css({width:Math.round(rx * $("#myPhoto").width()) + "px",    //预览图片宽度为计算比例值与原图片宽度的乘积height:Math.round(rx * $("#myPhoto").height()) + "px",    //预览图片高度为计算比例值与原图片高度的乘积marginLeft:"-" + Math.round(rx * coords.x) + "px",marginTop:"-" + Math.round(ry * coords.y) + "px"});$("#X1").val(coords.x);$("#Y1").val(coords.y);$("#X2").val(coords.x2);$("#Y2").val(coords.y2);$("#W").val(coords.w);$("#H").val(coords.h);}}});

/** 图片裁剪通用接口* src：图片位置，dest：图片保存位置* 若要覆盖原图片，只需src == dest即可*/public static void cutImage(String src,String dest,int x,int y,int w,int h) throws IOException{ File srcImg =new File(src);//获取后缀名String suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(".") + 1);//根据不同的后缀获取图片读取器Iterator iterator = ImageIO.getImageReadersBySuffix(suffix); ImageReader reader = (ImageReader)iterator.next(); InputStream in=new FileInputStream(src);ImageInputStream iis = ImageIO.createImageInputStream(in); reader.setInput(iis, true); ImageReadParam param = reader.getDefaultReadParam(); //设置裁剪位置Rectangle rect = new Rectangle(x, y, w,h);  param.setSourceRegion(rect); //保存裁剪后的图片BufferedImage bi = reader.read(0,param);   ImageIO.write(bi, suffix, new File(dest));       } 

$('input[type=file]').change(function(){var file=this.files[0];var reader=new FileReader();reader.onload=function(){// 通过 reader.result 来访问生成的 DataURLvar url=reader.result;setImageURL(url);};reader.readAsDataURL(file);});var image=new Image();function setImageURL(url){image.src=url;}

// 以下四个参数由步骤2获得var x,  y, width, height;var canvas=$('<canvas width="'+width+'" height="'+height+'"></canvas>')[0],ctx=canvas.getContext('2d');ctx.drawImage(image,x,y,width,height,0,0,width,height);//重绘$(document.body).append(canvas);//添加到文档中可以查看效果

var data=canvas.toDataURL();// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了data=data.split(',')[1];data=window.atob(data);var ia = new Uint8Array(data.length);for (var i = 0; i < data.length; i++) {ia[i] = data.charCodeAt(i);};// canvas.toDataURL 返回的默认格式就是 image/pngvar blob=new Blob([ia], {type:"image/png"});