JavaWeb项目----拼图游戏(可实现上传自己喜欢的图片,和女朋友一起玩呀!!)

一、游戏界面

前端页面声明:已获得博友 Nil Xuan授权,文章链接点它-> 原生Javascript实现拼图游戏

二次开发的效果图如下:
在这里插入图片描述
界面说明:左边是拼图操作页面,右边是原图参照,鼠标放上去有放大效果,右下角还可以上传自己的图片,实际操作,可以自己玩一下就知道了。

二、游戏动态演示

也许你看的还不是很直观,那我就附上动图给你看看吧!(上传大小限制,故此分两段

  1. 第一段
    在这里插入图片描述

  2. 第二段
    在这里插入图片描述

三、上传图片的核心功能

看到这的,我想应该都是对这个项目有点感觉吧!!,那废话不多说,我们直接开干
图片上传需要考虑的点:

  1. 图片文件如何上传?
  2. 上传后放在哪?
  3. 大小如何修改?(因为前端页面已经写死)
  4. 如何渲染到前端?
  5. 大小有何限制?

这里考虑到项目的大小问题,所以本项目没有加数据库,当用户上传多次照片,以最后一次的为准,图片限制为.jpg格式的;大小为不超过1M

上传图片的核心代码

package cn.lixuquan.servlet;
/**
 * 处理图片上传
 */

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.tomcat.util.http.fileupload.FileUploadBase;

import cn.lixuquan.utils.ChangeImgSize;

/**
 * Servlet implementation class ImgServlet
 */
@WebServlet("/imgServlet")
public class ImgServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @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/html;charset=utf-8");
		//1.创建文件上传工厂
		DiskFileItemFactory factory = new DiskFileItemFactory();
		//1.1 通过工厂对象设置临时文件
		File f = new File("d://temp1");
		if(!f.exists())
		{
			f.mkdirs();
		}
		factory.setRepository(f);
		factory.setSizeThreshold(1024*1024);
		//2.创建解析器对象
		ServletFileUpload fileUpload = new ServletFileUpload(factory);
		//2.1设置允许上传文件的内存
		fileUpload.setSizeMax(1024*1024);
		//2.2 设置字符编码
		fileUpload.setHeaderEncoding("utf-8");
		PrintWriter out = response.getWriter();
		//3. 解析请求
		try
		{
			List<FileItem> fileItems = fileUpload.parseRequest(request);
			//开始遍历表单项
			for(FileItem fileitem: fileItems)
			{
				boolean flag = fileitem.isFormField();
				if(flag)
				{
					//普通表单项就直接跳过
					continue;
				}
				else
				{
					//文件上传表单项
					String filename = fileitem.getName();
					if(filename != null && !filename.equals(""))
					{
						String suffixName = filename.substring(filename.lastIndexOf(".")+1);
//						System.out.println(suffixName);
						if(!"jpg".equals(suffixName))
						{
							out.println("<script>");
							out.println("alert('图片上传失败,只允许.jpg图片,3秒后跳转');");
							out.println("</script>");
							response.setHeader("refresh","3;url=/PingTu/pingtu.jsp");
							//return;
						}
						else 
						{
								filename = filename.substring(filename.lastIndexOf("\\")+1);
								//上传同名文件的问题
								filename = UUID.randomUUID()+"_"+filename;
								//服务器端创建同名的文件
								String webPath = "/img/";
								//将文件名称和服务端的文件组合在一起
								String filePath = getServletContext().getRealPath(webPath+filename);
								//打印看看
//								System.out.println(filePath);
								//创建文件夹
								File file = new File(filePath);
								file.getParentFile().mkdirs();
								file.createNewFile();
								//获取文件的字节输入流
								InputStream is = fileitem.getInputStream();
								//获取文件的字节输出流
								FileOutputStream os = new FileOutputStream(file);
								byte[] buffer = new byte[1024];
								int len = 0;
								while((len=is.read(buffer)) > 0)
								{
									os.write(buffer, 0, len);
								}
								//关闭流
								is.close();
								os.close();
								//删除临时文件
								fileitem.delete();
								//修改图片的大小,指定长宽
								boolean flg = false;
								ChangeImgSize changeImgSize = new ChangeImgSize();
								flg = changeImgSize.changeSize(690,472, filePath);
								if(flg)
								{
									out.println("<script>");
									out.println("alert('图片上传成功,3秒后跳转');");
									out.println("</script>");
									String fPath = "."+webPath+filename;
									request.getSession().setAttribute("filePath", fPath);
//									request.setAttribute("filePath", fPath);
								}
								else
								{
									out.println("<script>");
									out.println("alert('图片上传失败,3秒后跳转');");
									out.println("</script>");
								}
								response.setHeader("refresh","3;url=/PingTu/pingtu.jsp");
						}
					}
				}
			}
		}
		catch (FileUploadException e) {
			// TODO Auto-generated catch block
			out.println("<script>");
			out.println("alert('上传失败!上传的文件大小超出限制 lM');");
			out.println("</script>");
			response.setHeader("refresh","3;url=/PingTu/pingtu.jsp");
			e.getMessage();
		}
	}

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

修改图片大小的类:

package cn.lixuquan.utils;

import java.awt.Image;
import java.awt.image.BufferedImage;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;

import javax.imageio.ImageIO;

/**
     * 改变图片的尺寸
     *
     * @param newWidth, newHeight, path
     * @return boolean
     */
public class ChangeImgSize{
    public boolean changeSize(int newWidth, int newHeight, String path) {
        BufferedInputStream in = null;
        try {
            in = new BufferedInputStream(new FileInputStream(path));

            //字节流转图片对象
            Image bi = ImageIO.read(in);
            //构建图片流
            BufferedImage tag = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_RGB);
            //绘制改变尺寸后的图
            tag.getGraphics().drawImage(bi, 0, 0, newWidth, newHeight, null);
            //输出流
            BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(path));
            //JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
            //encoder.encode(tag);
            ImageIO.write(tag, "jpg", out);
            in.close();
            out.close();
            return true;
        } catch (IOException e) {
            return false;
        }
    }
}
四、获取完整项目
  1. 虽然只是个小项目,但是可以学的东西还是挺多的,特别是前端拼图的逻辑处理,如果想更深的了解这个小项目的前端设计,可以点开篇分享的链接,博主已经写了大致的思路。
  2. 如果看着不过瘾,还想和同学玩玩,也可以,我已经把项目部署在服务器上了,=关注下方的公众号,回复拼图项目,即可得到完整的项目,以及访问链接,然后你就可以开心的玩了(前提是服务器还在用,因为要钱呀呀呀)
五、分享与热爱

最后有兴趣一起交流的,可以关注我的公众号:这里你能够学到很实用的技巧,不是常用的我不说,公众号回复提取码即可获取以下学习资料啦啦啦啦,喜欢就拿去吧!!

(链接时常会失效,若出现此类情况,可以加我微信:17722328325(加时请备注:学习资料))

  1. Java web从入门到精通电子书

  2. Python机器学习电子书

  3. Python400集(北京尚学堂)

  4. JavaScript项目案例、经典面试题

  5. Java300集(入门、精通)

  6. Java后端培训机构录集(同事培训内部提供)

  7. java重要知识pdf文档(价值连城呀呀,不收藏你会后悔的)

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值