zoukankan      html  css  js  c++  java

  • 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
  • 相关阅读:
    react native的注释
    p标签在div中垂直居中，并且div高度随着p标签文字内容的变化而变化
    express框架搭建服务端
    react native项目的创建和运行
    ES6通过使用babel兼容到ie9
    react父传子
    经典排序之 归并排序
    经典排序之 冒泡排序
    C++基础题
    关于虚函数的应用（10个例子）
  • 原文地址：https://www.cnblogs.com/madoff/p/5115045.html
Copyright © 2011-2022 走看看