为图片添加水印（前后端分离，练习用小项目）

项目简介

项目码云地址
项目功能很简单，给图片添加文字或图片水印。
这个项目以个人练习为目的创建，主要是了解Vue和Element-UI，熟悉相关代码书写。
目前，有很多软件（桌面或移动应用，在线网页应用）都比我这个项目功能丰富和完善，所以，本人理直气壮的宣传本项目特点——界面丑，功能少，欢迎吐槽，概不接受。

关键代码

java后端

跨域配置

前后端分离，部署的时候可能不在同一个域名或IP下，这就涉及到跨域，前后端都需要进行相关的配置。后端实现WebMvcConfigurer接口，配置全局跨域。也可使用@CrossOrigin注解来完成。

@Configuration
public class WebConfig implements WebMvcConfigurer {
	/**
	 * 跨域设置
	 */
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		String [] origins = "http://localhost:8080,http://127.0.0.1:8080".split(",");
		registry.addMapping("/**").allowedOrigins(origins).allowCredentials(true).allowedMethods("*")
				.allowedHeaders("*").exposedHeaders("Set-Cookie").maxAge(3600L);
	}
}

注意
（1）放入allowedOrigins里面的，是一个字符串数组，不是字符串！
（2）http://localhost:8080和http://127.0.0.1:8080是等同的，但是，配置的时候，两者都需要写入

文字水印关键代码

参考博客Java给图片添加水印书写
把字体Font对象，设置到Graphics2D对象中，然后通过循环画出来

	/**
	 * 
	 * 添加文字水印
	 * @param g 绘图对象
	 * @param waterMarkContent 水印内容
	 * @param srcImgWidth 图片宽度
	 * @param srcImgHeight 图片高度
	 * 
	 */
	private void addMark(Graphics2D g, String waterMarkContent, int srcImgWidth, int srcImgHeight) {
		if (StringUtils.isBlank(waterMarkContent)) {
			waterMarkContent = "默认水印";
		}
		int width = getWatermarkLength(waterMarkContent, g);
		// 图片的高 除以 文字水印的宽 打印的行数(以文字水印的宽为间隔)
		int rowsNumber = srcImgHeight / width + srcImgHeight % width;
		// 图片的宽 除以 文字水印的宽 每行打印的列数(以文字水印的宽为间隔)
		int columnsNumber = srcImgWidth / width + srcImgWidth % width;
		// 防止图片太小而文字水印太长，所以至少打印一次
		if (rowsNumber < 1) {
			rowsNumber = 1;
		}
		if (columnsNumber < 1) {
			columnsNumber = 1;
		}
		for (int j = 0; j < rowsNumber; j++) {
			for (int i = 0; i < columnsNumber; i++) {
				// 画出水印,并设置水印位置
				g.drawString(waterMarkContent, i * width + j * width, -i * width + j * width);
			}
		}
	}

图片水印关键代码

使用了Thumbnailator，一个google使用的开源的工具类，功能强大，调用简单，一行代码搞定

	/**
	 * 图片添加图片水印
	 * 
	 * @param srcImgPath 需要添加水印的图片的路径
	 * @param wmImgPath  水印图片
	 * @param position   水印位置
	 * @param alpha      透明度
	 * 
	 * @return 添加水印后图片输出路径
	 */
	public String mark(String srcImgPath, String wmImgPath, Positions position, Float alpha) {
		String outImgPath = getOutImgPath(srcImgPath);
		try {
			Thumbnails.of(srcImgPath).scale(1.0).watermark(position, ImageIO.read(new File(wmImgPath)), alpha)
					.outputQuality(1.0).toFile(outImgPath);
		} catch (IOException e) {
			log.error(e.getMessage(), e);
		}
		return outImgPath;
	}

图片判断

从安全性考虑，文件需要进行判断是否真的是一个图片，后缀名判断比较基础，再加上mime类型判断就比较完善了。
引入了org.apache.tika，用于mime类型判断。
在没有第三方jar支持的情况下，jdk本身可以处理的图片格式是有限的，为了保证项目可以处理这个图片，还需要用ImageIO尝试读取，看能不能得到Image对象。

	/**
	 * 
	 * 判断是否为图像
	 * @param imgFile 图片文件对象
	 * @return 封装后的判断结果
	 *
	 */
	public AjaxResult isImage(File imgFile) {
		if (!imgFile.exists()) {
			return AjaxResult.fail("文件不存在");
		}
		// 获取文件名(包含扩展名)
		String filename = imgFile.getName();
		// 截取文件后缀(不带点)
		String ext = FilenameUtils.getExtension(filename).toLowerCase();
		if (!judgeSuffixAndMimeType(ext, imgFile)) {
			return AjaxResult.fail("文件格式异常");
		}
		try {
			BufferedImage img = ImageIO.read(imgFile);
			if(null == img || img.getWidth(null) <= 0 || img.getHeight(null) <= 0) {
				return AjaxResult.fail("图片无法处理");
			} else {
				return AjaxResult.success(ext, img);
			}
		} catch (Exception e) {
			log.error(e.getMessage(), e);
			return AjaxResult.fail("图片读取异常");
		}
	}

除了判断文件是否为图像外，项目中还对图片进行了重绘，进一步提升安全性，排除可能存在的恶意代码。重绘同样使用了Thumbnailator。
较为特殊的是tiff格式的图片，引入com.sun.media.jai.codec.PNGEncodeParam包，将tiff图片转换为png图片，然后进行水印添加操作。

vue前端

通过vue-cli创建前端项目，可以通过图形化界面配置依赖，对我这种初学者比较友好

跨域配置

在根目录下创建vue.config.js文件

devServer: {
	// 设置代理
	proxy: {
		'/api/': {
			target: "http://localhost:8099",
			changeOrigin: true,
			pathRewrite: {
				'^/api': ''
			}
		}
	}
}

POST提交

在项目中使用axios与后端进行交互，有一点麻烦的是，项目中既存在普通的表单提交（字体设置），又存在多媒体（图片）提交。
对form表单提交（类型application/x-www-form-urlencoded），需要在提交前对数据进行序列化。我在项目中使用QS将对象序列化成URL的形式；
对图片提交(类型multiple/form-data)，无需特殊处理

const _axios = axios.create(config);

_axios.interceptors.request.use(
	function(config) {
		if (config.method === 'post' && config.headers.post['Content-Type']==="application/x-www-form-urlencoded") {
			config.data = qs.stringify({
				...config.data
			});
		}
		return config;
	},
	function(error) {
		// Do something with request error
		return Promise.reject(error);
	}
);