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

川长思鸟来 2022-05-20 07:55 166阅读 0赞

> 校徽头像小程序后台使用spring进行搭建，只有控制层一层，在控制层中完成了请求的处理以及图片的叠加。下面看实现的具体步骤。

1、实现思路

在前面的文章[校徽头像小程序前台实现][Link 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">
    
        
        <context:component-scan base-package="nchu.avatar.controller"/>
        
        <mvc:annotation-driven/>
        
        <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">  
            
            <property name="maxUploadSize">  
                <value>10485760</value>  
            </property>  
            
            <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相关知识。本次教程的代码关注公众‘昌航软件之家’，并在后台回复`校徽头像小程序源码`获取，我在代码中还写了一个查询接口，能够实现学校的查询，效果如下图，大家可以尝试一下。

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

--------------------