由于在Web端,JavaScript不能直接处理本地文件,因此可以在后台裁剪图片,或者利用html5的canvas来处理。
方法1:传送到后台剪切
步骤1:上传图片到后台,向前端返回图片URL
利用input标签,将文件发送到后台。
1 | <input id= "image" type= "file" name= "image" /> |
可以使用jQuery中的ajaxFileUpload方法
03 | url: 'live/apply/uploadImage' , |
09 | success: function (data, status) |
13 | error: function (data, status, e) |
步骤2: 进行裁剪,获取图片的坐标及长宽等值,传回后台
这里一般是利用一个移动的div来获取剪截的动画效果,目前有多种jquery插件可以使用,本文使用的是Jcrop插件,比较简单方便。
06 | function showPreview(coords){ |
07 | if (parseInt(coords.w){ |
09 | var rx = $( "#preview_box" ).width() / coords.w; |
10 | var ry = $( "#preview_box" ).height() / coords.h; |
12 | $( "#crop_preview" ).css({ |
13 | width:Math. round (rx * $( "#myPhoto" ).width()) + "px" , |
14 | height:Math. round (rx * $( "#myPhoto" ).height()) + "px" , |
15 | marginLeft: "-" + Math. round (rx * coords.x) + "px" , |
16 | marginTop: "-" + Math. round (ry * coords.y) + "px" |
19 | $( "#X1" ).val(coords.x); |
20 | $( "#Y1" ).val(coords.y); |
21 | $( "#X2" ).val(coords.x2); |
22 | $( "#Y2" ).val(coords.y2); |
23 | $( "#W" ).val(coords.w); |
24 | $( "#H" ).val(coords.h); |
根据上述过程,可以将获取到的剪截横纵坐标和长宽数据发送到后台。
步骤3:后台裁剪图片
以java代码为例
06 | public static void cutImage(String src,String dest,int x,int y,int w,int h) throws IOException{ |
08 | File srcImg = new File(src); |
10 | String suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf( "." ) + 1); |
12 | Iterator iterator = ImageIO.getImageReadersBySuffix(suffix); |
13 | ImageReader reader = (ImageReader)iterator.next(); |
15 | InputStream in= new FileInputStream(src); |
16 | ImageInputStream iis = ImageIO.createImageInputStream(in); |
18 | reader.setInput(iis, true); |
19 | ImageReadParam param = reader.getDefaultReadParam(); |
22 | Rectangle rect = new Rectangle(x, y, w,h); |
23 | param.setSourceRegion(rect); |
26 | BufferedImage bi = reader.read(0,param); |
27 | ImageIO.write(bi, suffix, new File(dest)); |
方法2:Html5的canvas技术
这个需要浏览器支持以下几个点,并且兼容性还没有进行测试:
步骤1:读取文件
如方法1一样,需要用input标签来获取file,但是JavaScript不能直接操作文件,因此需要File API来处理。
01 | $( 'input[type=file]' ).change( function (){ |
02 | var file=this.files[0]; |
03 | var reader= new FileReader(); |
05 | reader.onload= function (){ |
07 | var url=reader.result; |
11 | reader.readAsDataURL(file); |
15 | function setImageURL(url){ |
步骤2:获取裁剪坐标
参照方法1中的步骤2
步骤3:利用canvas重绘图片
首先要设置剪截后的图片大小相等的canvas。
2 | var x, y, width, height; |
4 | var canvas=$( '<canvas width="' +width+ '" height="' +height+ '"></canvas>' )[0], |
5 | ctx=canvas.getContext( '2d' ); |
7 | ctx.drawImage(image,x,y,width,height,0,0,width,height); |
8 | $(document.body).append(canvas); |
步骤4:保存图片
我们要获取 canvas 中图片的信息,需要用 toDataURL 转换成上面用到的 DataURL 。 然后取出其中 base64 信息,再用 window.atob 转换成由二进制字符串。但 window.atob 转换后的结果仍然是字符串,直接给 Blob 还是会出错。所以又要用 Uint8Array 转换一下。
01 | var data=canvas.toDataURL(); |
04 | data=data.split( ',' )[1]; |
05 | data=window.atob(data); |
06 | var ia = new Uint8Array(data.length); |
07 | for ( var i = 0; i < data.length; i++) { |
08 | ia[i] = data.charCodeAt(i); |
12 | var blob= new Blob([ia], {type: "image/png" }); |
步骤5:将blob数据发送至后台
在后台可以将Blob格式的数据转换成image保存。
链接:http://segmentfault.com/a/1190000004268074?utm_source=tuicool&utm_medium=referral
作者:a8167270