写九宫格日记模块设计

发布时间：2025-12-10 11:28:26 浏览次数：10

九宫格日记模块概述

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图片背景透明

<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(){$('p.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.填写日记信息的实现过程

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 stubresponse.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 stubdoGet(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 blocke.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);//获取HttpSessionsession.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()));// 设置用户IDint 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>");}/*********************************/}

上一篇：精选10家出色的/卓越的/优异的/杰出的的室内软装设计培训机构(软装培训) 下一篇：走进幕后：如何进入《陈情令》剧组，成为后期制作人员？(后期制作培训学校)

综合百科

写九宫格日记模块设计

九宫格日记模块概述

综合百科

网站导航