调用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();
} } }
调用jquery.Jcrop.min.js 切割图片 实例的更多相关文章
- 异步提交表单插件jquery.form.min.js的使用实例
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- 通过jquery.transit.min.js插件，实现图片的移动
首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...
- 图片延迟插件 Jquery.lazyload.min.js
当一个页面打开的图片太多,我们可以用jquery的一个延迟加载插件.名为:jquery.lazyload.min.js 使用非常简单,如下: <div style="height:70 ...
- jquery.fly.min.js 拋物插件
插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.js和j ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo
背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...
- jquery.qrcode.min.js(支持中文转化二维码)
详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前 ...
- jQuery Validate验证框架详解(jquery.validate.min.js)
原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...
随机推荐
- [Arc102B]All Your Paths are Different Lengths_构造_二进制拆分
All Your Paths are Different Lengths 题目链接:https://atcoder.jp/contests/arc102/tasks/arc102_b 题解: 构造题有 ...
- 使用JQuery获取被选中的checkbox的value值
上网查了一下,感觉一些人回答得真的是不知所云,要么代码不够简便.或者是有些想装逼成分等. 以下为使用JQuery获取input checkbox被选中的值代码: <html> & ...
- Oracle存储过程——日常记录
代码规范 Oracle存储过程,关键字大写,变量小写并以v_开头,规范代码,提高可读性 赋值与判断符号 Oracle存储过程,变量赋值使用 := 符号,条件判断直接用 = 符号. 变量声明需在 beg ...
- java学习（东软睿道）2019-09-07（预课html基础）《随堂笔记》
1. 文件名称.html 2. 后缀表示文件类型.txt .doc .ppt 3. 标签<html> <head> <body> 显示内容 <font siz ...
- 小菜鸟之SSM框架
# SSM框架 # **什么是框架** 就是模板,将一些基础性的程序和代码由框架模板提供,然后程序员补充和业务需求相关的代码. # **ssm框架组成** s: springMvc 子框架 代替ser ...
- 解决Eclipse中文文档注释错位-处女座的悲哀!
1.右键打开eclips属性 2.选择兼容性为win8,然后打开Eclipse即可解决 作者:醉烟 出处:https://www.cnblogs.com/WangLei2018/ 本文版权归作者 ...
- ORACLE查询进程，并杀死
用于存放常用SQL --查询主键在哪一列 --设置页大小 --设置行大小 col COLUMN_NAME for a20 --设置字段显示长度 col TABLE_NAME for a20 col O ...
- 用Lua的协程实现类似Unity协程的语句块
local co_time_tbl = {} setmetatable(co_time_tbl, { __len = function(o) for k, v in pairs(o) do count ...
- Asp.net core 学习笔记 ef core Surrogate Key, Natural Key, Alternate Keys
更新: 2019-12-23 foreignkey 并不一样要配上 alternate key,其实只要是 unique 就可以了. 和 sql server 是一样的, 经常有一种错觉 primar ...
- C#字典转对象
/// <summary> /// Assign parameters to specified objects /// </summary> /// <typepara ...