基于Spring Boot实现图片上传/加水印

文章共 537字，阅读大约需要 2分钟 ！

---

概述

很多网站的图片为了版权考虑都加有水印，尤其是那些图片类网站。自己正好最近和图片打交道比较多，因此就探索了一番基于 Spring Boot这把利器来实现从 图片上传 → 图片加水印 的一把梭操作！

注： 本文首发于 My Personal Blog：程序羊，欢迎光临 小站

本文内容脑图如下：

---

搭建 Spring Boot基础工程

过程不再赘述了，这里给出 pom中的关键依赖：

 <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.5</version>
        </dependency>
    </dependencies>

编写文件上传服务

• 主要就是编写 ImageUploadService 服务

里面仅一个上传图片的方法：uploadImage 方法

    /**
     * 功能：上传图片
     * @param file 文件
     * @param uploadPath 服务器上上传文件的路径
     * @param physicalUploadPath  服务器上上传文件的物理路径
     * @return 上传文件的 URL相对地址
     */
    public String uploadImage( MultipartFile file, String uploadPath, String physicalUploadPath ) {
    String filePath = physicalUploadPath + file.getOriginalFilename();

    <span class="hljs-keyword">try</span> {
        File targetFile=<span class="hljs-keyword">new</span> File(filePath);
        FileUtils.writeByteArrayToFile(targetFile, file.getBytes());
    } <span class="hljs-keyword">catch</span> (IOException e) {
        e.printStackTrace();
    }
    <span class="hljs-keyword">return</span> uploadPath + <span class="hljs-string">"/"</span> + file.getOriginalFilename();
}

}

---

编写图片加水印服务

• 编写 ImageWatermarkService 服务

里面就一个主要的 watermarkAdd方法，代码后面写有详细解释

@Service
public class ImageWatermarkService {
<span class="hljs-comment">/**
 * imgFile 图像文件
 * imageFileName 图像文件名
 * uploadPath 服务器上上传文件的相对路径
 * realUploadPath 服务器上上传文件的物理路径
 */</span>
<span class="hljs-function"><span class="hljs-keyword">public</span> String <span class="hljs-title">watermarkAdd</span><span class="hljs-params">( File imgFile, String imageFileName, String uploadPath, String realUploadPath )</span> </span>{

    String imgWithWatermarkFileName = <span class="hljs-string">"watermark_"</span> + imageFileName;
    OutputStream os = <span class="hljs-keyword">null</span>;

    <span class="hljs-keyword">try</span> {
        Image image = ImageIO.read(imgFile);

        <span class="hljs-keyword">int</span> width = image.getWidth(<span class="hljs-keyword">null</span>);
        <span class="hljs-keyword">int</span> height = image.getHeight(<span class="hljs-keyword">null</span>);

        BufferedImage bufferedImage = <span class="hljs-keyword">new</span> BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);  <span class="hljs-comment">// ①</span>
        Graphics2D g = bufferedImage.createGraphics();  <span class="hljs-comment">// ②</span>
        g.drawImage(image, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, width,height,<span class="hljs-keyword">null</span>);  <span class="hljs-comment">// ③</span>

        String logoPath = realUploadPath + <span class="hljs-string">"/"</span> + Const.LOGO_FILE_NAME;  <span class="hljs-comment">// 水印图片地址</span>
        File logo = <span class="hljs-keyword">new</span> File(logoPath);        <span class="hljs-comment">// 读取水印图片</span>
        Image imageLogo = ImageIO.read(logo);

        <span class="hljs-keyword">int</span> markWidth = imageLogo.getWidth(<span class="hljs-keyword">null</span>);    <span class="hljs-comment">// 水印图片的宽度和高度</span>
        <span class="hljs-keyword">int</span> markHeight = imageLogo.getHeight(<span class="hljs-keyword">null</span>);

        g.setComposite( AlphaComposite.getInstance(AlphaComposite.SRC_ATOP, Const.ALPHA) );  <span class="hljs-comment">// 设置水印透明度</span>
        g.rotate(Math.toRadians(-<span class="hljs-number">10</span>), bufferedImage.getWidth()/<span class="hljs-number">2</span>, bufferedImage.getHeight()/<span class="hljs-number">2</span>);  <span class="hljs-comment">// 设置水印图片的旋转度</span>

        <span class="hljs-keyword">int</span> x = Const.X;
        <span class="hljs-keyword">int</span> y = Const.Y;

        <span class="hljs-keyword">int</span> xInterval = Const.X_INTERVAL;
        <span class="hljs-keyword">int</span> yInterval = Const.Y_INTERVAL;

        <span class="hljs-keyword">double</span> count = <span class="hljs-number">1.5</span>;
        <span class="hljs-keyword">while</span> ( x &lt; width*count ) {  <span class="hljs-comment">// 循环添加多个水印logo</span>
            y = -height / <span class="hljs-number">2</span>;
            <span class="hljs-keyword">while</span>( y &lt; height*count ) {
                g.drawImage(imageLogo, x, y, <span class="hljs-keyword">null</span>);  <span class="hljs-comment">// ④</span>
                y += markHeight + yInterval;
            }
            x += markWidth + xInterval;
        }

        g.dispose();

        os = <span class="hljs-keyword">new</span> FileOutputStream(realUploadPath + <span class="hljs-string">"/"</span> + imgWithWatermarkFileName);
        JPEGImageEncoder en = JPEGCodec.createJPEGEncoder(os); <span class="hljs-comment">// ⑤</span>
        en.encode(bufferedImage); <span class="hljs-comment">// ⑥</span>

    } <span class="hljs-keyword">catch</span> (Exception e) {
        e.printStackTrace();
    } <span class="hljs-keyword">finally</span> {
        <span class="hljs-keyword">if</span>(os!=<span class="hljs-keyword">null</span>){
            <span class="hljs-keyword">try</span> {
                os.close();
            } <span class="hljs-keyword">catch</span> (IOException e) {
                e.printStackTrace();
            }
        }
    }

    <span class="hljs-keyword">return</span> uploadPath + <span class="hljs-string">"/"</span> + imgWithWatermarkFileName;
}

}

代码思路解释如下：

可以对照代码中的标示数字和下面的解释进行理解：

① 创建缓存图片
② 创建绘图工具
③ 将原图绘制到缓存图片
④ 将水印logo绘制到缓存图片
⑤ 创建图像编码工具类
⑥ 编码缓存图像生成目标图片

可见思路清晰易懂！

---

编写 图片上传/处理 控制器

我们在该控制器代码中将上述的 图片上传服务 和 图片加水印服务 给用起来：

@RestController
public class WatermarkController {
<span class="hljs-meta">@Autowired</span>
<span class="hljs-keyword">private</span> ImageUploadService imageUploadService;

<span class="hljs-meta">@Autowired</span>
<span class="hljs-keyword">private</span> ImageWatermarkService watermarkService;

<span class="hljs-meta">@RequestMapping</span>(value = <span class="hljs-string">"/watermarktest"</span>, method = RequestMethod.POST)
<span class="hljs-function"><span class="hljs-keyword">public</span> ImageInfo <span class="hljs-title">watermarkTest</span><span class="hljs-params">( @RequestParam(<span class="hljs-string">"file"</span>)</span> MultipartFile image ) </span>{

    ImageInfo imgInfo = <span class="hljs-keyword">new</span> ImageInfo();

    String uploadPath = <span class="hljs-string">"static/images/"</span>;  <span class="hljs-comment">// 服务器上上传文件的相对路径</span>
    String physicalUploadPath = getClass().getClassLoader().getResource(uploadPath).getPath();  <span class="hljs-comment">// 服务器上上传文件的物理路径</span>

    String imageURL = imageUploadService.uploadImage( image, uploadPath, physicalUploadPath );
    File imageFile = <span class="hljs-keyword">new</span> File(physicalUploadPath + image.getOriginalFilename() );

    String watermarkAddImageURL = watermarkService.watermarkAdd(imageFile, image.getOriginalFilename(), uploadPath, physicalUploadPath);

    imgInfo.setImageUrl(imageURL);
    imgInfo.setLogoImageUrl(watermarkAddImageURL);
    <span class="hljs-keyword">return</span> imgInfo;

---

实际实验与效果展示

我们用 Postman工具来辅助我们发出 localhost:9999/watermarktest 请求，进行图片上传的操作：

之后我们再去项目的资源目录下查看上传的原图 和 加完水印后图片的效果如下：

喔唷，这水印 Logo是不是打的有点多...

不过这下终于不用害怕别人对您的图片侵权啦 ！

---

后记

由于能力有限，若有错误或者不当之处，还请大家批评指正，一起学习交流！