校徽头像小程序后台使用spring进行搭建，只有控制层一层，在控制层中完成了请求的处理以及图片的叠加。下面看实现的具体步骤。
1、实现思路
在前面的文章校徽头像小程序前台实现中讲到了校徽制作小程序工作的基本流程，即上传图片，后台接收到请求，并对图片进行叠加处理，最后生成一张新的图片，并将新的图片的url返回到前台的小程序。这里使用Java来编写后台，服务器使用tomcat，后台框架使用spring。
2、配置环境
首先在eclipse中创建动态的web工程，然后导入spring的相关jar包，或者使用maven直接引用依赖。这里我使用的是导入jar包的方式，再配置好相关配置文件。
web.xml的配置如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>avatar_change</display-name>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/springmvc-config.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
springmvc-config.xml的配置如下：
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.2.xsd">
<!-- 自动扫描该包，SpringMVC会将包下用了@controller注解的类注册为Spring的controller -->
<context:component-scan base-package="nchu.avatar.controller"/>
<!-- 设置默认配置方案 -->
<mvc:annotation-driven/>
<!-- 使用默认的Servlet来响应静态文件 -->
<mvc:default-servlet-handler/>
<!-- 视图解析器 -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- 前缀 -->
<property name="prefix">
<value>/WEB-INF/jsp/</value>
</property>
<!-- 后缀 -->
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 上传文件大小上限，单位为字节（10MB） -->
<property name="maxUploadSize">
<value>10485760</value>
</property>
<!-- 请求的编码格式，必须和jSP的pageEncoding属性一致，以便正确读取表单的内容，默认为ISO-8859-1 -->
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
</bean>
</beans>
3、编写图片工具类代码
未避免重复造轮子，这里直接参考网上的代码，主要用到了两个类BufferedImage和Graphics2D。BufferdImage获得图片的缓冲，然后通过Graphics2D来绘制图片，实现两个图片的叠加，关键代码如下：
/**
*
* @Title: 构造图片
* @Description: 生成水印并返回java.awt.image.BufferedImage
* @param file
* 源文件(图片)
* @param waterFile
* 水印文件(图片)
* @param x
* 距离右下角的X偏移量
* @param y
* 距离右下角的Y偏移量
* @param alpha
* 透明度, 选择值从0.0~1.0: 完全透明~完全不透明
* @return BufferedImage
* @throws IOException
*/
public static BufferedImage watermark(File file, File waterFile) throws IOException {
// 获取底图
BufferedImage buffImg = ImageIO.read(file);
Integer width = buffImg.getWidth();
Integer height = buffImg.getHeight();
// 获取层图
BufferedImage waterImg = ImageIO.read(waterFile);
waterImg = getRoundedImage(waterImg,1250);
// 创建Graphics2D对象，用在底图对象上绘图
Graphics2D g2d = buffImg.createGraphics();
int waterImgWidth = waterImg.getWidth();// 获取层图的宽度
int waterImgHeight = waterImg.getHeight();// 获取层图的高度
// 在图形和图像中实现混合和透明效果
// 绘制
g2d.drawImage(waterImg, (width-waterImgWidth)/2, (height-waterImgHeight)/2, waterImgWidth, waterImgHeight, null);
g2d.dispose();// 释放图形上下文使用的系统资源
return buffImg;
}
4、编写控制层代码
由于功能单一，业务层的相关操作这里也放带控制层实现了。首先创建一个控制类，使用注解标注方法，拦截前台的上传文件的请求，并调用图片工具类中的方法执行图层叠加的操作，然后将图片的名称封装进map返回前台。为了防止图片名冲突，这里所有的图片名称均使用时间戳命名。主要代码如下：
/**
* @author 邹明远
*
*/
@Controller
public class PageController {
/**
* 上传头像请求
* @param request
* @param file
* @return
* @throws IllegalStateException
* @throws IOException
*/
@RequestMapping("/saveHeaderPic")
@ResponseBody
public Map<String, Object> saveHeaderPic(HttpServletRequest request, @RequestParam("file") MultipartFile file)
throws IllegalStateException, IOException {
// 如果文件不为空，写入上传路径
if (!file.isEmpty()) {
// 上传文件路径
String path = request.getServletContext().getRealPath("/images/");
System.out.println(path);
// 上传文件名使用时间戳
String fileName = new Date().getTime() + ".png";
File filePath = new File(path, fileName);
// 判断路径是否存在
if (!filePath.getParentFile().exists()) {
filePath.getParentFile().mkdirs();
}
// 将上传的文件保存到目标文件当中
file.transferTo(new File(path + File.separator + fileName));
String filePathString = filePath.getAbsolutePath();
// 转换成png格式
ImageUtil.convert(filePathString, "png", filePathString);
// System.out.println(filePath.getAbsolutePath());
// Thumbnails.of(filePathString).outputQuality(1f).width(1500).height(1500).toFile(filePathString);
BufferedImage buffImg = ImageUtil.watermark(new File(path + "152799490334logo.png"),
new File(filePathString));
ImageUtil.generateWaterFile(buffImg, filePathString);
Thumbnails.of(filePathString).scale(0.3f).outputQuality(0.5f).toFile(filePathString);
// 将新图片名称返回到前端
Map<String, Object> map = new HashMap<String, Object>();
map.put("success", "图片上传成功");
map.put("url", fileName);
return map;
} else {
Map<String, Object> map = new HashMap<String, Object>();
map.put("error", "图片不合法");
return map;
}
}
}
5、打包工程
最后将工程打包成war格式，发布到服务器上面，小程序就可以进行访问了。要注意的是，小程序不支持ip地址访问，只能通过域名，并且服务器需要https证书，这个大家最好去查查相关资料。
6、总结
小程序后台的实现并不难，只需要去网上查找图片处理相关的代码，稍微进行一个整合便可以实现。另外要熟悉后台的搭建，如果不是很懂，建议大家去学习一下spring相关知识。本次教程的代码关注公众‘昌航软件之家’，并在后台回复校徽头像小程序源码获取，我在代码中还写了一个查询接口，能够实现学校的查询，效果如下图，大家可以尝试一下。
看完了随手点个赞哦，点完赞一天都会有好运气~
推荐阅读：