Java实现图片裁剪预览功能详解编程语言

在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章!

需要插件:jQuery Jcrop 

后端代码:

    package org.csg.upload;   
       
    import java.awt.Rectangle;   
    import java.awt.image.BufferedImage;   
    import java.io.File;   
    import java.io.FileInputStream;   
    import java.io.IOException;   
    import java.util.Iterator;   
    import javax.imageio.ImageIO;   
    import javax.imageio.ImageReadParam;   
    import javax.imageio.ImageReader;   
    import javax.imageio.stream.ImageInputStream;   
    public class Upload {   
        /**  
         * @author  小夜的传说  
         * @param path1 图片原路径  
         * @param path2  裁剪后存储的路径  
         * @param x x轴  
         * @param y y轴  
         * @param w  
         * @param h  
         */   
        public static void CutImage(String path1,String path2,int x,int y,int w,int h){   
            FileInputStream fileInputStream=null;   
            ImageInputStream iis=null;   
               
            try {   
                //读取图片文件,建立文件输入流   
                fileInputStream=new FileInputStream(path1);   
                //创建图片的文件流 迭代器   
                Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName("jpg");   
                ImageReader reader=it.next();   
                //获取图片流 建立文图 文件流   
                iis=ImageIO.createImageInputStream(fileInputStream);   
                //获取图片默认参数   
                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, "jpg", new File(path2));   
            } catch (Exception e) {   
                e.printStackTrace();   
                System.out.println("裁剪失败");   
            }finally{   
                try {   
                    if(fileInputStream!=null){   
                        fileInputStream.close();   
                    }   
                    if(iis!=null){   
                        iis.close();   
                    }   
                } catch (IOException e) {   
                    e.printStackTrace();   
                }   
                   
            }   
        }   
    }  


访问代码:

    <%@ page language="java" import="java.util.*,org.csg.upload.*" pageEncoding="utf-8"%>   
    <%   
        //图片的相对路径   
        String imagPath=request.getParameter("imgPath");   
        String relPath=request.getRealPath("/");//获取图片服务器绝对地址   
        String newFileName=new Date().getTime()+".jpg";   
        //实际图片路径   
        String path1=relPath+imagPath;   
        //裁剪后存储到服务器的图片路径   
        String path2=relPath+"/images/"+newFileName;   
           
        int x=Integer.parseInt(request.getParameter("x"));   
        int y=Integer.parseInt(request.getParameter("y"));   
        int w=Integer.parseInt(request.getParameter("w"));   
        int h=Integer.parseInt(request.getParameter("h"));   
        try{   
        Upload.CutImage(path1, path2, x, y, w, h);   
        out.print("<img src='images/"+newFileName+"'/>");   
        }catch(Exception e){   
        e.printStackTrace();   
        out.print("图片裁剪失败");   
        }   
    %>  


jsp代码:

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>   
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
    <html>   
      <head>   
        <title>Jsp开发头像裁剪</title>   
        <meta http-equiv="pragma" content="no-cache">   
        <meta http-equiv="cache-control" content="no-cache">   
        <meta http-equiv="expires" content="0">       
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
        <meta http-equiv="description" content="This is my page">   
        <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />   
        <script type="text/javascript" src="js/jquery.min.js"></script>   
        <script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>   
        <style type="text/css">   
        *{margin: 0;padding: 0;}   
        .cut{   
            margin-top: 20px;   
        }   
         #preview-pane {   
              display: block;   
              position: absolute;   
              z-index: 2000;   
              top: 10px;   
              right: -280px;   
              padding: 6px;   
              border: 1px rgba(0,0,0,.4) solid;   
              background-color: white;   
              -webkit-border-radius: 6px;   
              -moz-border-radius: 6px;   
              border-radius: 6px;   
              -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);   
              -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);   
              box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);   
        }   
           
        #preview-pane .preview-container {   
          width: 250px;   
          height: 170px;   
          overflow: hidden;   
        }   
        </style>   
        <script type="text/javascript">   
            $(function(){   
                var jcrop_api,   
                boundx="",   
                boundy="",   
                $preview = $('#preview-pane'),   
                $pcnt = $('#preview-pane .preview-container'),   
                $pimg = $('#preview-pane .preview-container img'),   
                xsize = $pcnt.width(),   
                ysize = $pcnt.height();   
                 $('#cutImage').Jcrop({   
                    onChange:showCoords,//获取选中的值   
                    onSelect:showCoords,//获取拖拽的值   
                    aspectRatio: xsize / ysize   
                 },function(){   
                      var bounds = this.getBounds();   
                      boundx = bounds[0];   
                      boundy = bounds[1];   
                      jcrop_api = this;   
                      $preview.appendTo(jcrop_api.ui.holder);   
                    });   
                 function showCoords(c){   
                    var x=c.x;   
                    var y=c.y;   
                    var w=c.w;   
                    var h=c.h;   
                    $("#x1").val(parseInt(x));   
                    $("#y1").val(parseInt(y));   
                    $("#w").val(parseInt(w));   
                    $("#h").val(parseInt(h));   
                 if (parseInt(c.w) > 0){   
                        var rx = xsize / c.w;   
                        var ry = ysize / c.h;   
                        $pimg.css({   
                          width: Math.round(rx * boundx) + 'px',   
                          height: Math.round(ry * boundy) + 'px',   
                          marginLeft: '-' + Math.round(rx * c.x) + 'px',   
                          marginTop: '-' + Math.round(ry * c.y) + 'px'   
                        });   
                      }   
                 }   
            });   
        </script>   
      </head>   
      <body>   
        <h1>Java开发QQ头像裁剪系统</h1>   
        <div class="cut">   
            <img id="cutImage" alt="" src="images/1.jpg" >   
            <div id="preview-pane">   
                <div class="preview-container">   
                  <img src="images/1.jpg" class="jcrop-preview" alt="Preview" />   
                </div>   
            </div>   
        </div>   
      <form action="success.jsp" method="post" >   
        <input type="text" value="images/1.jpg" name="imgPath">   
        x轴:<input type="text" size="4" id="x1" name="x" />   
        y轴:<input type="text" size="4" id="y1" name="y"/>   
        宽度:<input type="text" size="4" id="w" name="w"/>   
        高度:<input type="text" size="4" id="h" name="h"/>   
        <input type="submit" value="裁剪"/>   
      </form>   
      </body>   
    </html>  

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/10272.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论