教程 | 校徽头像制作小程序后端实现

校徽头像小程序后台使用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/beanshttp://www.springframework.org/schema/beans/spring-beans-4.2.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd     http://www.springframework.org/schema/contexthttp://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")@ResponseBodypublic 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相关知识。本次教程的代码关注公众‘昌航软件之家’，并在后台回复校徽头像小程序源码获取，我在代码中还写了一个查询接口，能够实现学校的查询，效果如下图，大家可以尝试一下。

看完了随手点个赞哦，点完赞一天都会有好运气~

教程 | 校徽头像制作小程序后端实现相关推荐

教程 | 校徽头像制作小程序前端实现
之前公众号推过一个校徽头像制作的工具类小程序,通过图片叠加的技术,实现头像与校徽图片的叠加,并生成新的头像图片,今天首先教大家制作小程序前台界面. 1.创建工程打开微信开发者工具,新建一个工程,输入 ...
最近网上比较火的虎年西游记金钱豹头像制作小程序源码
简介: 今天为大家分享一下最近抖音和朋友圈比较火的云开发虎年西游记金钱豹头像制作小程序源码和西游记南山大王金钱豹的趣味头像素材包,年少不知豹哥好,错把樵哥当成宝,金钱豹头像最近也是由于谐音梗金钱暴富为 ...
团长头像制作小程序源码_支持流量主
最近各类团长挺火的然后就诞生了这款团长头像制作器支持流量主模式支持自定义文字,和拥有各种团长模板等等源码下载:团zhang头像制作小程序源码_支持流量主-小程序文档类资源-CSDN下载
团长头像制作小程序源码下载支持流量主安装简单
最近疫情上海魔都各类团长挺火的然后就诞生了这款团长头像制作器支持流量主模式支持自定义文字,和拥有各种团长模板等等具体小编就不多说了,大家看小编的测试演示图吧! 小程序源码下载地址:(已更新) ...
微信小程序修改制作生成头像——校庆头像制作小程序
给头像加边框--校庆头像制作的小程序 --分享改变世界,感谢成长路上遇见的分享话不多说先上图(满意客官再往下看): 首页选择头像框制作界面用户选择图像用户裁剪选择的图像生成并保存头像到手机 ...
微擎开发小程序上应用市场（2）——头像框小程序后端开发
上一篇文章说了一下小程序的思维导图:思维导图今天开始开发后端: 一.下载开发包到微擎后台配置小程序基本应用最后两个开发包 1.module.zip这个文件直接上传到服务器微擎框架程序中安装配置 ...
姓氏头像框一键制作小程序源码
正文: 姓氏头像框一键制作小程序源码+附微语模块,源码无需后端服务器搭建,源码搭建也非常简单,包含了多种模板制作,且风格多样化,例如有热度比较高的姓氏头像. 虽然该主题是以姓氏框制作为主的,但是姓氏主 ...
姓氏头像框一键制作小程序源码+附微语模块
正文: 姓氏头像框一键制作小程序源码+附微语模块,源码无需后端服务器搭建,源码搭建也非常简单,包含了多种模板制作,且风格多样化,例如有热度比较高的姓氏头像. 虽然该主题是以姓氏框制作为主的,但是姓氏主 ...
chatgpt智能问答微信小程序+后端源码+视频搭建教程
chatgpt智能问答微信小程序+后端源码+视频搭建教程,这是一套微信小程序,后端是thinkphp框架为接口的,后端是前后端分离用elmentUI的源码框架. 小狐狸GPT付费体验系统是一款基于Th ...

教程 | 校徽头像制作小程序后端实现

教程 | 校徽头像制作小程序后端实现相关推荐

最新文章

热门文章