折口木木

一切伟大的思想和行动都有一个微不足道的开始

Web端裁剪图片方法

由于在Web端,JavaScript不能直接处理本地文件,因此可以在后台裁剪图片,或者利用html5的canvas来处理。

方法1:传送到后台剪切

步骤1:上传图片到后台,向前端返回图片URL

利用input标签,将文件发送到后台。

可以使用jQuery中的ajaxFileUpload方法

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

步骤2: 进行裁剪,获取图片的坐标及长宽等值,传回后台

这里一般是利用一个移动的div来获取剪截的动画效果,目前有多种jquery插件可以使用,本文使用的是Jcrop插件,比较简单方便。

$("#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); } } });

根据上述过程,可以将获取到的剪截横纵坐标和长宽数据发送到后台。

步骤3:后台裁剪图片

以java代码为例

/* * 图片裁剪通用接口 * 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)); }

方法2:Html5的canvas技术

这个需要浏览器支持以下几个点,并且兼容性还没有进行测试:

File API
Blob
canvas

步骤1:读取文件

如方法1一样,需要用input标签来获取file,但是JavaScript不能直接操作文件,因此需要File API来处理。

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

步骤2:获取裁剪坐标

参照方法1中的步骤2

步骤3:利用canvas重绘图片

首先要设置剪截后的图片大小相等的canvas。

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

步骤4:保存图片

我们要获取 canvas 中图片的信息,需要用 toDataURL 转换成上面用到的 DataURL 。 然后取出其中 base64 信息,再用window.atob 转换成由二进制字符串。但 window.atob 转换后的结果仍然是字符串,直接给 Blob 还是会出错。所以又要用Uint8Array 转换一下。

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/png var blob=new Blob([ia], {type:"image/png"});

步骤5:将blob数据发送至后台

在后台可以将Blob格式的数据转换成image保存。

原文标题:Web端裁剪图片方法
原文链接:https://segmentfault.com/a/1190000004268074