寫九宮格日記模塊設計

來源：互聯網轉載時間：2023-10-24 14:32:31

九宮格日記模塊概述

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(){$('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.填寫日記信息的實現過程

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>");}/*********************************/}

本文由 貴州做網站公司 整理發布，部分圖文來源于互聯網，如有侵權，請聯系我們刪除，謝謝！

上一篇：過去一年的回顧

下一篇：Windows Subsystem for Android (WSA) 下載：在 Windows 11 上運行 Android 應用 (June 2023)