码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-17 18:37:02      阅读:502      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   java   ar   

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

首先是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();
        }

    }

}

 

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

标签:style   blog   http   color   io   os   使用   java   ar   

原文地址:http://www.cnblogs.com/a393060727/p/3977761.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!