调用jquery.Jcrop.min.js 切割图片 实例

时间：2023-03-09 19:18:25
调用jquery.Jcrop.min.js 切割图片 实例

需求是：上传一个图片，然后将上传的这个图片进行切割。。。。。。。。

首先是jsp页面。页面需要引入js
  <script src="${fileUrlPrx}/scripts/wap/jquery.min.js"></script>
  <script src="${fileUrlPrx}/scripts/wap/jquery.Jcrop.min.js"></script>

注意几个隐藏域，这些是选中区域的点坐标，与长宽：
  <input type="hidden" id="x" name="x" value="0"/>
  <input type="hidden" id="y" name="y" value="0"/>
  <input type="hidden" id="w" name="w" value="0"/>
  <input type="hidden" id="h" name="h" value="0"/>

<%@ include file="/commons/taglibs.jsp" %>

<%@ page contentType="text/html;charset=UTF-8" %>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8" />

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

        <meta content="yes" name="apple-mobile-web-app-capable">

        <meta content="black" name="apple-mobile-web-app-status-bar-style">

        <meta name="format-detection" content="telephone=no">

        <title>照片裁切</title>

        <link href="${fileUrlPrx}/skins/css/wap_hdcs.css" rel="stylesheet" type="text/css">

        <link href="${fileUrlPrx}/skins/css/wap_jquery.Jcrop.min.css" rel="stylesheet" type="text/css">

        <script src="${fileUrlPrx}/scripts/wap/jquery.min.js"></script>

        <script src="${fileUrlPrx}/scripts/wap/jquery.Jcrop.min.js"></script>

        <script src="${fileUrlPrx}/commons/js/WXUtil.js"></script>

        <style type="text/css">

            #mainBox2{

               width:300px;

               height:300px;

               position:absolute;

               left:50%;

               top:50%;

               margin:-100px 0 0 -100px;

               font-size: 16px;

            }

            .shadow{display: none;width:100%;height:100%;background:rgba(0,0,0,0.5);position:absolute;top:0;left:0;z-index:999;text-align:center;font-size:16px;font-weight:bold;color:#FFF;}

        </style>

        <script type="text/javascript">

            WXUtil.setPrefix('${fileUrlPrx}');

            var memberId = '${memberId}';

            var photourl = '${photourl}';

            function initCut(){

                if(navigator.userAgent.indexOf("windows Phone")>-0){

                    setTimeout("doCut()",1000);

                }else{

                    doCut();

                }

            }        

            function doCut(){

                function updateCoords(c){

                    $('#x').val(c.x);

                    $('#y').val(c.y);

                    $('#w').val(c.w);

                    $('#h').val(c.h);

                };

                var wh = $("#clipArea").height();

                var ww = $("#clipArea").width();

                var cutHeight = 0 ;

                var cutWidth = 0 ;

                if(ww/wh>0.8566){

                    cutHeight = wh

                    cutWidth = parseInt(cutHeight*0.8566) ;

                }else{

                    cutWidth = ww

                    cutHeight = parseInt(cutWidth/0.8566) ;

                }

                $('#cropbox').Jcrop({

                    //minSize: [cutWidth,cutHeight],

                    //maxSize:[cutWidth ,cutHeight],

                    setSelect: [0,0,cutWidth, cutHeight],

                    aspectRatio: 0.8566,

                    onSelect: updateCoords

                });

                function checkCoords(){

                    if(parseInt($.trim($('#w').val())) > 0){

                        return true;

                    };

                    alert('请裁剪你所需要的照片。€‚');

                    return false;

                };

                $('.clipBtn a').click(function(){

                    checkCoords();

                });

            }

            var isSubmit = 0 ;

            $(function(){

                $("#printThisPic").click(function(){

                    if(isSubmit==1){

                        alert("正在处理您的照片请稍后...");

                        return false ;

                    }

                    var code = $("#code").val();

                    if(code==""){

                        alert("请输入消费码");

                        return false ;

                    }

                    var msg = $("#msg").val();

                    if(code.length>42){

                        alert("为了保证打印效果，最多只能填写42个字");

                        return false ;

                    }

                    isSubmit = 1 ;

                    var x = $("#x").val();

                    var y = $("#y").val();

                    var w = $("#w").val();

                    var h = $("#h").val();

                    var wh = $("#clipArea").height();

                    var ww = $("#clipArea").width();

                    $(document).scrollTop(0);

                    var contentHeight = $(document).height();

                    $('#shadow').css('height',contentHeight).css('lineHeight',contentHeight/2 + 'px').show();

                    $.post('${fileUrlPrx}wxcs/cutSuccess',{msg:msg,code:code,x: parseInt(x),y: parseInt(y),w:parseInt(w),h:parseInt(h),wh:parseInt(wh),ww:parseInt(ww),memberid: memberId,photourl: photourl},function(data){

                        if(data=='1'){

                            WXUtil.closeWxWindow();

                        }else if(data=='2'){

                            alert("系统错误，请重试。");

                            $('#shadow').hide();

                            isSubmit = 0 ;

                        }else if(data=='3'){

                            alert("您的消费码输入错误。");

                            $('#shadow').hide();

                            isSubmit = 0 ;

                        }else if(data=='4'){

                            alert("亲，设备离线了。");

                            $('#shadow').hide();

                            isSubmit = 0 ;

                        }else if(data=='4'){

                            alert("亲，您的消费码已经被使用。");

                            $('#shadow').hide();

                            isSubmit = 0 ;

                        }

                    });

                });

            });

        </script>

    </head>

    <body>

        <div class="clipBox box-size">

            <div class="clipArea" id="clipArea">

                <c:if test="${ errMsg != null }">

                    <div id="mainBox2">

                        <font style="color: red;font-weight: 700;font-size: 16px;">${errMsg}</font>

                    </div>

                </c:if>

                <c:if test="${ errMsg == null }">

                    <div class="clipShow" id="clipShow">

                        <img id="cropbox" src="${fileUrlPrx}${photourl}" onload="initCut()"/>

                    </div>

                </c:if>

            </div>

            <c:if test="${ errMsg == null }">

                <textarea id="msg" placeholder="写上一句话吧！！" maxlength="42" class="shadowTextarea box-size"></textarea>

                <input id="code" type="text" placeholder="请输入消费码" class="shadowInp box-size">

                <a href="javascript:void(0)" class="purpleBtn box-size" id="printThisPic">打　　印</a>

            </c:if>

        </div>

        <div id="shadow" class="shadow">正在处理您的照片，请稍候...</div>

        <input type="hidden" id="x" name="x" value="0"/>

        <input type="hidden" id="y" name="y" value="0"/>

        <input type="hidden" id="w" name="w" value="0"/>

        <input type="hidden" id="h" name="h" value="0"/>

    </body>

</html>

然后是后台接收：

@RequestMapping(value="/cutSuccess")

    @ResponseBody

    public String cutSuccess(ModelMap model,HttpServletRequest request,HttpServletResponse response){

        response.setCharacterEncoding("UTF-8");

        response.setContentType("text/html;charset=UTF-8");

        String memberid = request.getParameter("memberid");

        String photourl = request.getParameter("photourl");

        String code = request.getParameter("code");

        String msg = request.getParameter("msg");

        logger.info("start编辑照片..toCutImg...memberid="+memberid+",photourl="+photourl+",code="+code+",msg="+msg);

        int x = Integer.valueOf(request.getParameter("x")==null?"0":request.getParameter("x"));

        int y = Integer.valueOf(request.getParameter("y")==null?"0":request.getParameter("y"));

        int w = Integer.valueOf(request.getParameter("w")==null?"0":request.getParameter("w"));

        int h = Integer.valueOf(request.getParameter("h")==null?"0":request.getParameter("h"));

        int ww = Integer.valueOf(request.getParameter("ww")==null?"0":request.getParameter("ww"));

        int wh = Integer.valueOf(request.getParameter("wh")==null?"0":request.getParameter("wh"));

        logger.info("参数：x="+x+"\ty="+y+"\tw="+w+"\th="+h+"\tww="+ww+"\twh="+wh);

        ThdCsPrintLogQuery query = new ThdCsPrintLogQuery();

        query.setMemberid(Long.valueOf(memberid));

        query.setPhotourl(photourl);

        ThdCsPrintLog tplog = (ThdCsPrintLog)thdCsPrintLogManager.findPage(query).getResult().get(0);

        try {

            String filename = tplog.getPhotourl() ;

            String fileRealpath = request.getRealPath("/");

            String code_filepath =fileRealpath+filename;

            File file = new File(code_filepath);

            BufferedImage tphotoImg = ImageIO.read(file);

            BufferedImage cutImg = eApiManager.cutImgComput(tphotoImg, w, h, x, y,ww,wh);
//保存剪切之后的图片

            String resultpicname = new Date().getTime()+""+CommonUtil.getRandNum(6)+"_cut.jpg";

            String finalFilePath = "/upload/picmsg/"+tplog.getShopid()+"/"+resultpicname ;

            tplog.setCutpicurl(finalFilePath);

            thdCsPrintLogManager.update(tplog);

            File fileIn = new File(fileRealpath+finalFilePath);

            fileIn.getParentFile().mkdirs();

            OutputStream os = new FileOutputStream(fileIn);

            JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os);

            encoder.encode(cutImg);

            cutImg.flush();

            os.close();

            os.flush();

//            String res = getInfoAndSendMsg(tplog, code, memberid, msg,photourl) ;

            logger.info("end 编辑照片..toCutImg...memberid="+memberid+",photourl="+photourl+",code="+code);

            return res;

        } catch (Exception e) {

            e.printStackTrace();

            return ("2 "); //系统错误

        }

    }

其中，主要剪切方法：cutImgComput（）

/**

     * 截图

     * @param image 原图

     * @param width 获取面宽

     * @param height 获取面高

     * @param x 获取面x

     * @param y 获取面y

     * @param pagew 展示页面宽

     * @param pageh 展示页面高

     * @return

     * @throws Exception

     */

    public BufferedImage cutImgComput(BufferedImage image, int width, int height, int x, int y, int pagew,int pageh) throws Exception{

        int oldW = image.getWidth(), oldH = image.getHeight(); // 原图横纵长、宽

        int newW = width * oldW/pagew; // 新宽度 = 页面截图宽 * 原图宽/展示div宽度

        int newH = height * oldH/pageh; // 新高度 = 页面截图高 * 原高宽/展示div高度

        int newX = x * oldW/pagew; // 新X坐标 = 选择x坐标 * 原图宽/展示div宽度

        int newY = y * oldH/pageh;// 新Y坐标 = 选择y坐标 * 原高宽/展示div高度 

        ImageFilter cropFilter = new CropImageFilter(newX, newY, newW, newH);

        Image img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));

        BufferedImage tag = new BufferedImage(newW, newH, BufferedImage.TYPE_INT_RGB);

        Graphics g = tag.getGraphics();

        g.drawImage(img, 0, 0, null); // 绘制缩小后的图

        g.dispose();

        return tag;

    }

到此，完毕。。

如果是剪切本地一个图片，然后直接切割，可以这样：

package chen.test;

import java.awt.Graphics;

import java.awt.Image;

import java.awt.Toolkit;

import java.awt.image.BufferedImage;

import java.awt.image.CropImageFilter;

import java.awt.image.FilteredImageSource;

import java.awt.image.ImageFilter;

import java.io.File;

import java.io.FileOutputStream;

import java.io.OutputStream;

import java.util.Date;

import javax.imageio.ImageIO;

import com.msp.wxcrm.model.ThdCsPrintLog;

import com.msp.wxcrm.vo.query.ThdCsPrintLogQuery;

import com.sun.image.codec.jpeg.JPEGCodec;

import com.sun.image.codec.jpeg.JPEGImageEncoder;

import javacommon.util.CommonUtil;

import javacommon.util.Util;

public class TestImg {

    public String cutPhoto(String photourl) throws Exception{

        ThdCsPrintLog thdCsPrintLog = new ThdCsPrintLog();

        thdCsPrintLog.setPhotourl(photourl);

        String fileRealpath = "E:/aa/upload/picmsg/153/";

        System.out.println("cutPhoto..start");

        String filePath = Util.getPath(this);

        if (CommonUtil.isNull(thdCsPrintLog.getCutpicurl())) {// 如果照片没有编辑过则获取原图片

            //TODO 如果照片没有被编辑过，则

            System.out.println("当前图片没有编辑过，需要剪切照片start");

            String filename = thdCsPrintLog.getPhotourl() ;// 原图

            String code_filepath =fileRealpath+filename;

            File file = new File(code_filepath);

            BufferedImage tphotoImg = ImageIO.read(file);

            // 获取图片的宽、高坐标

            int oldwidth = tphotoImg.getWidth();

            int oldheight = tphotoImg.getHeight();

            int cutWidth=0, cutHeight=0, x=0, y=0 ; // 新的截图宽高

            // 切面

            if(oldwidth > oldheight){// 横图

                cutHeight = oldheight;

                cutWidth = (int) (cutHeight*0.8566) ;

                x = (oldwidth-cutWidth)/2; // x=（原图宽-截图宽）/2

                y= 0;// y=高

            }else{// 纵图

                cutWidth = oldwidth;

                cutHeight = (int) (cutWidth/0.8566) ;

                x = 0; // x= 原点

                y= (oldheight-cutHeight)/2;// y=(原图高-截图高)/2;

            }

            String resultpicname = new Date().getTime()+""+CommonUtil.getRandNum(6)+"_cut.jpg";

            BufferedImage cutImg = this.cutImgComput(tphotoImg, cutWidth, cutHeight, x, y, oldwidth, oldheight);

            File fileIn = new File(fileRealpath+resultpicname);

            fileIn.getParentFile().mkdirs();

            OutputStream os = new FileOutputStream(fileIn);

            JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os);

            encoder.encode(cutImg);

            cutImg.flush();

            os.close();

            os.flush();

            System.out.println("当前图片没有编辑过，需要剪切照片end");

        }

        System.out.println("完成。");

        return filePath;

    }

        /**

         * 截图

         * @author 路人甲

         * @param image 原图

         * @param width 获取面宽

         * @param height 获取面高

         * @param x 获取面x

         * @param y 获取面y

         * @param pagew 展示页面宽

         * @param pageh 展示页面高

         * @return

         * @throws Exception

         */

        public BufferedImage cutImgComput(BufferedImage image, int width, int height, int x, int y, int pagew,int pageh) throws Exception{

            int oldW = image.getWidth(), oldH = image.getHeight(); // 原图横纵长、宽

            int newW = width * oldW/pagew; // 新宽度 = 页面截图宽 * 原图宽/展示div宽度

            int newH = height * oldH/pageh; // 新高度 = 页面截图高 * 原高宽/展示div高度

            int newX = x * oldW/pagew; // 新X坐标 = 选择x坐标 * 原图宽/展示div宽度

            int newY = y * oldH/pageh;// 新Y坐标 = 选择y坐标 * 原高宽/展示div高度 

            ImageFilter cropFilter = new CropImageFilter(newX, newY, newW, newH);

//            ImageFilter cropFilter = new CropImageFilter(x, y, width, height);

            Image img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));

            BufferedImage tag = new BufferedImage(newW, newH, BufferedImage.TYPE_INT_RGB);

            Graphics g = tag.getGraphics();

            g.drawImage(img, 0, 0, null); // 绘制缩小后的图

            g.dispose();

            return tag;

        }

    /**

     * @author 路人甲

     * @date Sep 15, 20145:50:25 PM

     * @param args

     */

    public static void main(String[] args) {

        String photourl = "153.jpg";

        TestImg testImg = new TestImg();

        try {

            testImg.cutPhoto(photourl);

        } catch (Exception e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

    }

}

相关文章