教程 | 校徽頭像製作小程式後端實現
阿新 • • 發佈：2019-01-02
校徽頭像小程式後臺使用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 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相關知識。本次教程的程式碼關注公眾‘昌航軟體之家’，並在後臺回覆校徽頭像小程式原始碼獲取，我在程式碼中還寫了一個查詢介面，能夠實現學校的查詢，效果如下圖，大家可以嘗試一下。
看完了隨手點個贊哦，點完贊一天都會有好運氣~
推薦閱讀：