调用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();
        }

    }

}
时间： 2024-10-25 00:55:18

调用jquery.Jcrop.min.js 切割图片 实例的相关文章

jquery.imgpreload.min.js插件实现页面图片预加载

页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAORk2_fotM4RbzRvtcaiQu2y_BU3Gpj0rYRy_EWrgXEuFeja0q 页面分享地址:http://www.jb51.net/article/21987.htm Javascript , Jquery 实现页面图片预加载百分比展现 如果需要在页面初始加载时显示加载进度.主要是

图片延迟插件 Jquery.lazyload.min.js

当一个页面打开的图片太多,我们可以用jquery的一个延迟加载插件.名为:jquery.lazyload.min.js 使用非常简单,下面我就把示例代码帖出来. 1 <div style="height:700px;"> 2 <img src="img/grey.gif" data-original="http://www.ziyou.com.cn/ziyou/uploadImg/bberfq.jpg" width="

jquery.form.min.js插件的使用实例

因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件,查找资料后得知: .serialize()序列化表单,提交按钮的值不会被序列化.另外,如果想要一个表单元素的值被序列化成字符串,这个元素必须含有 name 属性.此外,复选框(checkbox)和单选按钮(radio)(input类型为 "radio" 或 "checkbox&q

多语言切换jquery.i18n.min.js

项目需求,切换多语言,采用 jQuery.i18n.min.js文件内容如下 ------------------------------------------------- /*! * jquery i18n Plugin v1.0.0 * https://github.com/ZOMAKE/jquery.i18n * * Copyright 2017 ZOMAKE,Inc. * Released under the Apache Licence 2.0 */ (function($) { 

jquery.qrcode.min.js(支持中文转化二维码)

详情请看: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js,然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码,这样就基本完成了简单的扫一扫功能.后来在项目进行,开始要调用后台数据和传参数到接口的时候发现qrcode.js它只能解析英文或者数字,并且

前端生成二维码插件jquery.qrcode.min.js

1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 闲话少说,看demo吧!(haha...) 2.快速使用demo 简单介绍:这是一款快速应用案例,没有太特殊的需求的话够用了.鉴于需求,本例是把二维码生成了图片,可以保存到手机,然后发送给好友,直接识别二维码. 1 <!DOCTYPE html> 2 <html> 3 &

jquery.serializejson.min.js的妙用

关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件. 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交. 而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦.接下来介绍的插件将解决这个问题. 关于serializeJSON 使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用 .serializeJ

jquery.nicescroll.min.js滚动条插件的用法

1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaperta.com */(function(f){"function"===typeof define&&define.amd?define(["jquery"],f):"object"===typeof exports?module.ex

jquery.qrcode.min.js生成二维码

jquery.qrcode.min.js是一款可以生成二维码的插件,使用前提是先引入jquery,因为jquery.qrcode.min.js依赖jquery. 基本用法 1.引入js <script src="js/jquery-3.1.1.min.js"></script> <script src="js/jquery.qrcode.min.js"></script> 2.构建容器 <div class=&q