版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38341596/article/details/82903744
九宫格日记模块概述
1.成功登录系统
2.写九宫格日记页面填写日记信息
3.生成预览日记图片
4.是否满意 否-》2 /是-》5
5.保存日记图片，缩略图级日记信息
1.文件头部信息
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:if test="${empty sessionScope.userName}">
<c:redirect url="index.jsp"/>
</c:if>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
2.应用jquery让png图片背景透明
<!-- 使用JQuery解决PNG图片背景不透明的问题 -->
<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="JS/pluginpage.js"></script>
<script type="text/javascript" src="JS/jquery.pngFix.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.examples').pngFix( );
});
</script>
3.九宫格显示样式
<!-- ******************************* -->
<title>写九宫格日记</title>
<link rel="stylesheet" href="CSS/style.css">
<style>
#gridLayout { /*设置写日记的九宫格的<ul>标记的样式*/
float: left; /*设置浮动方式*/
list-style: none; /*不显示项目符号*/
width: 100%; /*设置宽度为100%*/
margin: 0px; /*设置外边距*/
padding: 0px; /*设置内边距*/
display: inline; /*设置显示方式*/
}
#gridLayout li { /*设置写日记的九宫格的<li>标记的样式*/
width: 33%; /*设置宽度*/
float: left; /*设置浮动方式*/
height: 198px; /*设置高度*/
padding: 0px; /*设置内边距*/
margin: 0px; /*设置外边距*/
display: inline; /*设置显示方式*/
}
#opt{ /*设置默认选项相关的<ul>标记的样式 */
padding:0px 0px 0px 10px; /*设置上、右、下内边距为0，左内边距为10*/
margin:0px; /*设置外边距*/
}
#opt li{ /*设置默认选项相关的<li>标记的样式 */
width:99%;
padding-top:5px 0px 0px 10px;
font-size:14px; /*设置字体大小为14像素*/
height:25px; /*设置高度*/
clear:both; /*左、右两侧不包含浮动内容*/
}
.cssContent{ /*设置内容的样式*/
float:left;
padding:40px 0px; /*设置上、下内边距为40，左、右内边距为0*/
display:inline; /*设置显示方式*/
}
#weather{ /*设置天气相关<ul>标记的样式*/
border:0px;
padding:15px 0px 0px 30px;
margin:20px;
display:inline;
}
#weather li{ /*设置天气相关<li>标记的样式*/
border:0px;
width:90%;
padding:10px;
margin:0px;
display:inline;
}
input{ /*设置输入框的样式*/
font-size:12px;
}
.title{ /*设置标题的样式*/
color:#0F6548;
font-weight:bold;
}
#writeDiary_bg{ /*设置日记背景的样式*/
width:738px; /*设置宽度*/
height:751px; /*设置高度*/
background-repeat:no-repeat; /*设置背景不重复*/
background-image:url(images/diaryBg_00.jpg); /*设置默认的背景图片*/
padding-top:50px; /*设置顶边距*/
padding-left:53px; /*设置左边距*/
}
</style>
<script language="javascript">
4.填写日记信息的实现过程
function setTemplate(style){
if(style=="默认"){
document.getElementById("writeDiary_bg").style.backgroundImage="url(images/diaryBg_00.jpg)";
document.getElementById("writeDiary_bg").style.width="738px"; //宽度
document.getElementById("writeDiary_bg").style.height="751px"; //高度
document.getElementById("writeDiary_bg").style.paddingTop="50px";//顶边距
document.getElementById("writeDiary_bg").style.paddingLeft="53px";//左边距
document.getElementById("template").value="默认";
}else if(style=="女孩"){
document.getElementById("writeDiary_bg").style.backgroundImage="url(images/diaryBg_01.jpg)";
document.getElementById("writeDiary_bg").style.width="750px"; //宽度
document.getElementById("writeDiary_bg").style.height="629px"; //高度
document.getElementById("writeDiary_bg").style.paddingTop="160px";//顶边距
document.getElementById("writeDiary_bg").style.paddingLeft="50px";//左边距
document.getElementById("template").value="女孩";
}else{
document.getElementById("writeDiary_bg").style.backgroundImage="url(images/diaryBg_02.jpg)";
document.getElementById("writeDiary_bg").style.width="740px"; //宽度
document.getElementById("writeDiary_bg").style.height="728px"; //高度
document.getElementById("writeDiary_bg").style.paddingTop="30px";//顶边距
document.getElementById("writeDiary_bg").style.paddingLeft="60px"; //左边距
document.getElementById("template").value="怀旧";
}
}
window.onload=function(){
var date=new Date(); //创建日期对象
year=date.getFullYear(); //获取当前日期中的年份
month=date.getMonth(); //获取当前日期中的月份
day=date.getDate(); //获取当时日期中的日
week=date.getDay(); //获取当前日期中的星期
var arr=new Array("星期日","日期一","星期二","星期三","星期四","星期五","星期六");
document.getElementById("now").innerHTML=year+"年"+(month+1)+"月"+day+"日 "+arr[week];
}
</script>
</head>
<body bgcolor="#F0F0F0">
<div id="box">
<%@ include file="top.jsp" %>
<c:if test="${empty sessionScope.userName}">
<c:redirect url="index.jsp"/>
</c:if>
<form name="form1" method="post" action="DiaryServlet?action=preview">
<div style="margin:10px;"><span class="title">请选择模板：</span><a href="#" onClick="setTemplate('默认')">默认</a> <a href="#" onClick="setTemplate('女孩')">女孩</a> <a href="#" onClick="setTemplate('怀旧')">怀旧</a>
<input id="template" name="template" type="hidden" value="默认">
</div>
<div style="padding:10px;" class="title">请输入日记标题： <input name="title" type="text" size="30" maxlength="30" value="请在此输入标题" onFocus="this.select()"></div>
<div id="writeDiary_bg">
<div style="width:600px; height:600px; ">
<ul id="gridLayout">
<li>
<div class="cssContent">
<ul id="opt">
<li>
<input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
</li>
<li><a href="#" onClick="document.getElementsByName('content')[0].value='工作完成了'">◎ 工作完成了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[0].value='我还活着'">◎ 我还活着</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[0].value='瘦了'">◎ 瘦了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[0].value='好多好吃的'">◎ 好多好吃的</a></li>
</ul>
</div>
</li>
<li>
<div class="cssContent">
<ul id="opt">
<li>
<input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
</li>
<li><a href="#" onClick="document.getElementsByName('content')[1].value='关心同事'">◎ 关心同事</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[1].value='问候家人了'">◎ 问候家人了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[1].value='给老人让坐'">◎ 给老人让坐</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[1].value='忘记了'">◎ 忘记了</a></li></ul>
</div>
</li>
<li>
<div class="cssContent">
<ul id="opt">
<li>
<input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
</li>
<li><a href="#" onClick="document.getElementsByName('content')[2].value='写工作总结'">◎ 写工作总结</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[2].value='出去旅游'">◎ 出去旅游</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[2].value='继续努力工作'">◎ 继续努力工作</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[2].value='休息一下'">◎ 休息一下</a></li></ul>
</div>
</li>
<li>
<div class="cssContent">
<ul id="opt">
<li>
<input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
</li>
<li><a href="#" onClick="document.getElementsByName('content')[3].value='效率提高了'">◎ 效率提高了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[3].value='看书了'">◎ 看书了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[3].value='状态好了'">◎ 状态好了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[3].value='不再空想了'">◎ 不再空想了</a></li></ul>
</div>
</li>
<li>
<ul id="weather"><li style="height:27px;"> <span id="now" style="font-size: 14px;font-weight:bold;padding-left:5px;">正在获取日期</span>
<input name="content" type="hidden" value="weathervalue"><br></br>
<div class="examples">
<input name="weather" type="radio" value="1">
<img src="images/1.png" width="30" height="30">
<input name="weather" type="radio" value="2">
<img src="images/2.png" width="30" height="30">
<input name="weather" type="radio" value="3">
<img src="images/3.png" width="30" height="30">
<input name="weather" type="radio" value="4">
<img src="images/4.png" width="30" height="30">
<input name="weather" type="radio" value="5" checked="checked">
<img src="images/5.png" width="30" height="30">
<input name="weather" type="radio" value="6">
<img src="images/6.png" width="30" height="30">
<input name="weather" type="radio" value="7">
<img src="images/7.png" width="30" height="30">
<input name="weather" type="radio" value="8">
<img src="images/8.png" width="30" height="30">
<input name="weather" type="radio" value="9">
<img src="images/9.png" width="30" height="30">
</div>
</li>
</ul>
</li>
<li>
<div class="cssContent">
<ul id="opt">
<li>
<input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
</li>
<li><a href="#" onClick="document.getElementsByName('content')[5].value='心情不错'">◎ 心情不错</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[5].value='不给力'">◎ 不给力</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[5].value='幸福'">◎ 幸福</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[5].value='神马都是浮云'">◎ 神马都是浮云</a></li></ul>
</div>
</li>
<li>
<div class="cssContent">
<ul id="opt">
<li>
<input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
</li>
<li><a href="#" onClick="document.getElementsByName('content')[6].value='她/他写九宫格日记了'">◎ 她/他写九宫格日记了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[6].value='白菜贵了'">◎ 白菜贵了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[6].value='大家都在关注神马'">◎ 大家都在关注神马</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[6].value='新闻联播'">◎ 新闻联播</a></li></ul>
</div>
</li>
<li>
<div class="cssContent">
<ul id="opt">
<li>
<input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
</li>
<li><a href="#" onClick="document.getElementsByName('content')[7].value='瘦了'">◎ 瘦了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[7].value='胖了'">◎ 胖了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[7].value='健康饮食'">◎ 健康饮食</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[7].value='一日三餐不能少'">◎ 一日三餐不能少</a></li></ul>
</div>
</li>
<li>
<div class="cssContent">
<ul id="opt">
<li>
<input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
</li>
<li><a href="#" onClick="document.getElementsByName('content')[8].value='睡得很好'">◎ 睡得很好</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[8].value='拥有自己的房子'">◎ 拥有自己的房子</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[8].value='忘记了'">◎ 忘记了</a></li>
<li><a href="#" onClick="document.getElementsByName('content')[8].value='努力做好自己'">◎ 努力做好自己</a></li></ul>
</div>
</li>
</ul>
</div>
</div>
<div style="height:30px;padding-left:360px;"><input type="submit" value="预览"></div>
</form>
<%@ include file="bottom.jsp" %>
</div>
</body>
</html>
5.生成预览图片的servlet
package com.wgh.servlet;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
/**
* Servlet implementation class CreateImg
*/
@WebServlet("/CreateImg")
public class CreateImg extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CreateImg() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/heml;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 禁止缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "No-cache");
response.setDateHeader("Expires", 0);
// 指定生成的响应是图片
response.setContentType("image/jpeg");
int width = 600; // 图片的宽度
int height = 600; // 图片的高度
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics(); // 获取Graphics类的对象
HttpSession session = request.getSession(true);
String template = session.getAttribute("template").toString();
String weather = session.getAttribute("weather").toString();
weather = request.getRealPath("images/" + weather + ".png");// 获取图片的完整路径
// 获取背景图片
String[] content = (String[]) session.getAttribute("diary");
File bgImgFile;
if ("默认".equals(template)) {
bgImgFile = new File(request.getRealPath("images/bg_00.jpg"));
Image src = ImageIO.read(bgImgFile); // 构造Image对象
g.drawImage(src, 0, 0, width, height, null); // 绘制背景图片
outWord(g, content, weather, 0, 0);
} else if ("女孩".equals(template)) {
bgImgFile = new File(request.getRealPath("images/bg_01.jpg"));
Image src = ImageIO.read(bgImgFile); // 构造Image对象
g.drawImage(src, 0, 0, width, height, null); // 绘制背景图片
outWord(g, content, weather, 25, 110);
} else {
bgImgFile = new File(request.getRealPath("images/bg_02.jpg"));
Image src = ImageIO.read(bgImgFile); // 构造Image对象
g.drawImage(src, 0, 0, width, height, null); // 绘制背景图片
outWord(g, content, weather, 30, 5);
}
/********************************************************/
// 将生成的日记图片保存到Session中
ImageIO.write(image, "PNG", response.getOutputStream());
session.setAttribute("diaryImg", image);
}
/**
* 功能：将九宫格日记的内容写到图片上
*
* @param g
* @param content
* @param offsetX
* @param offsetY
*/
public void outWord(Graphics g, String[] content, String weather,
int offsetX, int offsetY) {
Font mFont = new Font("微软雅黑", Font.PLAIN, 26); // 通过Font构造字体
g.setFont(mFont); // 设置字体
g.setColor(new Color(0, 0, 0)); // 设置颜色为黑色
int contentLen = 0;
int x = 0; // 文字的横坐标
int y = 0; // 文字的纵坐标
for (int i = 0; i < content.length; i++) {
contentLen = content[i].length(); // 获取内容的长度
x = 45 + (i % 3) * 170 + offsetX;
y = 130 + (i / 3) * 140 + offsetY;
if (content[i].equals("weathervalue")) {
File bgImgFile = new File(weather);
mFont = new Font("微软雅黑", Font.PLAIN, 14); // 通过Font构造字体
g.setFont(mFont); // 设置字体
Date date = new Date();
String newTime = new SimpleDateFormat("yyyy年M月d日 E")
.format(date);
g.drawString(newTime, x - 12, y - 60);
Image src;
try {
src = ImageIO.read(bgImgFile);
g.drawImage(src, x + 10, y - 40, 80, 80, null); // 绘制天气图片
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} // 构造Image对象
continue;
}
if (contentLen < 5) {
switch (contentLen % 5) {
case 1:
mFont = new Font("微软雅黑", Font.PLAIN, 40); // 通过Font构造字体
g.setFont(mFont); // 设置字体
g.drawString(content[i], x + 40, y);
break;
case 2:
mFont = new Font("微软雅黑", Font.PLAIN, 36); // 通过Font构造字体
g.setFont(mFont); // 设置字体
g.drawString(content[i], x + 25, y);
break;
case 3:
mFont = new Font("微软雅黑", Font.PLAIN, 30); // 通过Font构造字体
g.setFont(mFont); // 设置字体
g.drawString(content[i], x + 20, y);
break;
case 4:
mFont = new Font("微软雅黑", Font.PLAIN, 28); // 通过Font构造字体
g.setFont(mFont); // 设置字体
g.drawString(content[i], x + 10, y);
}
} else {
mFont = new Font("微软雅黑", Font.PLAIN, 22); // 通过Font构造字体
g.setFont(mFont); // 设置字体
if (Math.ceil(contentLen / 5.0) == 1) {
g.drawString(content[i], x, y);
} else if (Math.ceil(contentLen / 5.0) == 2) {
// 分两行写
g.drawString(content[i].substring(0, 5), x, y - 20);
g.drawString(content[i].substring(5), x, y + 10);
} else if (Math.ceil(contentLen / 5.0) == 3) {
// 分三行写
g.drawString(content[i].substring(0, 5), x, y - 30);
g.drawString(content[i].substring(5, 10), x, y);
g.drawString(content[i].substring(10), x, y + 30);
}
}
}
g.dispose();
}
}
6.预览与保存生成的日记图片的实现过程
/**
* 功能：预览九宫格日记
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void preview(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String title = request.getParameter("title");// 获取日记标题
String template = request.getParameter("template");// 获取日记模板
String weather = request.getParameter("weather");// 获取天气
// 获取日记内容
String[] content = request.getParameterValues("content");
for (int i = 0; i < content.length; i++) {
if (content[i].equals(null) || content[i].equals("")
|| content[i].equals("请在此输入文字")) {
content[i] = "没啥可说的"; //为没有设置内容的项目设置默认值
}
}
HttpSession session = request.getSession(true); //获取HttpSession
session.setAttribute("template", template);// 保存选择的模板
session.setAttribute("weather", weather); // 保存天气
session.setAttribute("title", title); // 保存日记标题
session.setAttribute("diary", content); // 保存日记内容
request.getRequestDispatcher("preview.jsp").forward(request, response);// 重定向页面
}
/**
* 功能：保存九宫格日记
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
@SuppressWarnings("deprecation")
public void save(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
HttpSession session = request.getSession(true);
BufferedImage image = (BufferedImage) session.getAttribute("diaryImg");
String url = request.getRequestURL().toString();// 获取请求的URL地址
url = request.getRealPath("/");// 获取请求的实际地址
long date = new Date().getTime();// 获取当前时间
Random r = new Random(date);
long value = r.nextLong();// 生成一个长整型的随机数
url = url + "images/diary/" + value;// 生成图片的URL地址
String scaleImgUrl = url + "scale.jpg";// 生成缩略图的URL地址
url = url + ".png";
ImageIO.write(image, "PNG", new File(url));
/***************** 生成图片缩略图 ******************************************/
File file = new File(url); // 获取原文件
Image src = ImageIO.read(file);
int old_w = src.getWidth(null);// 获取原图片的宽
int old_h = src.getHeight(null);// 获取原图片的高
int new_w = 0;// 新图片的宽
int new_h = 0;// 新图片的高
double temp = 0;// 缩放比例
/********* 计算缩放比例 ***************/
double tagSize = 60;
if (old_w > old_h) {
temp = old_w / tagSize;
} else {
temp = old_h / tagSize;
}
/*************************************/
new_w = (int) Math.round(old_w / temp);// 计算新图片的宽
new_h = (int) Math.round(old_h / temp);// 计算新图片的高
image = new BufferedImage(new_w, new_h, BufferedImage.TYPE_INT_RGB);
src = src.getScaledInstance(new_w, new_h, Image.SCALE_SMOOTH);
image.getGraphics().drawImage(src, 0, 0, new_w, new_h, null);
ImageIO.write(image, "JPG", new File(scaleImgUrl)); // 保存缩略图文件
/***********************************************************************/
/**** 将填写的日记保存到数据库中 *****/
Diary diary = new Diary();
diary.setAddress(String.valueOf(value));// 设置图片地址
diary.setTitle(session.getAttribute("title").toString());// 设置日记标题
diary.setUserid(Integer
.parseInt(session.getAttribute("uid").toString()));// 设置用户ID
int rtn = dao.saveDiary(diary); // 保存日记
PrintWriter out = response.getWriter();
if (rtn > 0) {// 当保存成功时
out
.println("<script>alert('保存成功！');window.location.href='DiaryServlet?action=listAllDiary';</script>");
} else {// 当保存失败时
out
.println("<script>alert('保存日记失败，请稍后重试！');history.back();</script>");
}
/*********************************/
}