Web端裁剪图片方法

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

　　方法1：传送到后台剪切

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

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

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

　　可以使用jQuery中的ajaxFileUpload方法

01
$.ajaxFileUpload(

02
   {

03
       url: 'live/apply/uploadImage', //用于文件上传的服务器端请求地址

04
       type:'post',

05
       secureuri: false, //一般设置为false

06
       fileElementId: image, //文件上传空间的id属性 

07
       dataType: 'json', //返回值类型 一般设置为json

08
       data:data, //可以传递图片属性及其他数据

09
       success: function (data, status)  //服务器成功响应处理函数

10
           {

11
               //上传传成功处理

12
           },

13
       error: function (data, status, e)//服务器响应失败处理函数

14
            {

15
               //上传失败处理

16
            }

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

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

01
    $("#myPhoto").Jcrop({

02
        onChange:showPreview,

03
        onSelect:showPreview,

04
        aspectRatio:1

05
    });   

06
    function showPreview(coords){

07
        if(parseInt(coords.w){

08
        //计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到

09
            var rx = $("#preview_box").width() / coords.w;

10
            var ry = $("#preview_box").height() / coords.h;

11
            //通过比例值控制图片的样式与显示

12
            $("#crop_preview").css({

13
                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"

17
            });

18
             
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);

25
        }

26
    }

27
});

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

　　步骤3：后台裁剪图片

　　以java代码为例

01
/*

02
     * 图片裁剪通用接口

03
     * src：图片位置，dest：图片保存位置

04
     * 若要覆盖原图片，只需src == dest即可

05
     */

06
    public static void cutImage(String src,String dest,int x,int y,int w,int h) throws IOException{

07
         
08
           File srcImg =new File(src);

09
           //获取后缀名

10
           String suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(".") + 1);

11
           //根据不同的后缀获取图片读取器

12
           Iterator iterator = ImageIO.getImageReadersBySuffix(suffix);

13
           ImageReader reader = (ImageReader)iterator.next();

14
            
15
           InputStream in=new FileInputStream(src);

16
           ImageInputStream iis = ImageIO.createImageInputStream(in);

17
            
18
           reader.setInput(iis, true);

19
           ImageReadParam param = reader.getDefaultReadParam();

20
           
21
           //设置裁剪位置

22
           Rectangle rect = new Rectangle(x, y, w,h); 

23
           param.setSourceRegion(rect);

24
            
25
           //保存裁剪后的图片

26
           BufferedImage bi = reader.read(0,param);  

27
           ImageIO.write(bi, suffix, new File(dest));      

28
    }

　　方法2：Html5的canvas技术

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

　　File API
　　Blob
　　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();

04
     
05
    reader.onload=function(){

06
        // 通过 reader.result 来访问生成的 DataURL

07
        var url=reader.result;

08
        setImageURL(url);

09
    };

10
     
11
    reader.readAsDataURL(file);

12
});

13
 
14
var image=new Image();

15
function setImageURL(url){

16
    image.src=url;

17
}

　　步骤2：获取裁剪坐标

　　参照方法1中的步骤2

　　步骤3：利用canvas重绘图片

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

1
// 以下四个参数由步骤2获得

2
var x,  y, width, height;

3
 
4
var canvas=$('<canvas width="'+width+'" height="'+height+'"></canvas>')[0],

5
ctx=canvas.getContext('2d');

6
 
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();

02
 
03
// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了

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);

09
};

10
 
11
// canvas.toDataURL 返回的默认格式就是 image/png

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