最近接到一個新的需求，需要將管理系統(tǒng)中指定頁面進(jìn)行截屏并將截屏后的圖片動態(tài)添加文字之后保存到本地指定目錄。本文按照測試demo簡單記錄一下，此需求分成三個需求點(diǎn)進(jìn)行實現(xiàn)：
    1.瀏覽器截屏生成圖片(保存位置為服務(wù)器指定目錄)
    2.截屏后的圖片添加文字
    3.服務(wù)器圖片下載到客戶端本地指定目錄

1.瀏覽器截屏(phantomjs插件實現(xiàn))

phantomjs插件官方下載地址：https://phantomjs.org/download.html
插件配置文件目錄(windows環(huán)境使用phantomjs.exe，Linux使用phantomjs)

在這里插入圖片描述

截屏測試demo：
文件路徑獲取工具類：

@Component
public class FileResourceUtil {
    @Autowired
    private ResourceLoader resourceLoader;

    /**
     * 根據(jù)文件名字獲取路徑
     * @param fileNameAndPath
     * @return
     */
    public String getFilePath(String fileNameAndPath) throws IOException {
        File file = resourceLoader.getResource("file:"+ fileNameAndPath).getFile();
        if(!file.exists()) {
            file = resourceLoader.getResource("classpath:"+ fileNameAndPath).getFile();
        }
        return file.getAbsolutePath();
    }
}

截屏接口：

public interface ScreenshotService {

    String screenshot(HttpServletRequest re, String url, String size) throws IOException;
}

截屏實現(xiàn)類：

@Service
public class ScreenshotServiceImpl implements ScreenshotService  {
	// 設(shè)置截屏后圖片存儲路徑
    private String pdfPath = "D:/testPhoto/";

    @Autowired
    private FileResourceUtil fileResourceUtil;


    @Override
    public String screenshot(HttpServletRequest re, String url, String size) throws IOException {
        String img = "";
        // 此處可根據(jù)操作系統(tǒng)獲取對應(yīng)phantomjs文件路徑(phantomjs.exe對應(yīng)Windows，phantomjs對應(yīng)Linux)
       /* String plugin = '';
        String os = System.getProperty("os.name").toLowerCase();
        if (os.contains("windows")) {
            plugin = resourceUtil.getFilePath("plugin/phantomjs.exe");
        }else{
         plugin = resourceUtil.getFilePath("plugin/phantomjs");
        }*/
        // 測試環(huán)境為window環(huán)境，故獲取phantomjs.exe所在目錄
          String plugin = fileResourceUtil.getFilePath("plugin/phantomjs.exe");
        String js = fileResourceUtil.getFilePath("plugin/rasterize.js");

        File file = new File(this.pdfPath);
        if (!file.exists()) {
            file.mkdirs();
        }

		// 截屏后文件名可自定義
        img = this.pdfPath  +  "1.png";

        File pluginFile = new File(plugin);
        if (!pluginFile.canExecute()) {
            pluginFile.setExecutable(true);
        }

        File jsFile = new File(js);

        if (!execute(plugin, jsFile.getAbsolutePath(), url, img, size)) {
            return null;
        }

        return img;
    }

	// 截屏圖片流處理
    public boolean execute(String... args) {

        Process process = null;

        StringBuilder msg = new StringBuilder();

        try {
            process = Runtime.getRuntime().exec(args);
            BufferedReader input = new BufferedReader(
                    new InputStreamReader(process.getInputStream()));
            String line;
            while ((line = input.readLine()) != null) {
                System.out.println(line);
            }
            input.close();
        } catch (IOException e) {
            System.out.println("error:"+e.getCause());
            msg.append("error");
        }
        return !msg.toString().endsWith("error");
    }
}

測試：

@SpringBootTest
class DemoApplicationTests {

	@Autowired
	public ScreenshotServiceImpl screenshotService;

	@Test
	public void test1(){
		try {
		// 截屏圖片大小可根據(jù)實際需求進(jìn)行設(shè)置
			screenshotService.screenshot(null, "https://www.baidu.com/" , "800px*800px");
		} catch (IOException e) {
			e.printStackTrace();
		}
}

截屏之后保存圖片：

在這里插入圖片描述

2.圖片上添加文字(提供兩種實現(xiàn)

方法一：

public class DemoOne {

    public static void main(String[] args) {
    	// 原文件地址
        String filePath = "D:\\testPhoto\\1.png";
        // 保存后文件地址：
        String outPath = "D:\\testPhoto\\2.png";   


        drawTextInImg(filePath, "test", outPath, 60, 755, "black", 24.0f);//在圖片上加test
    }
    public static void drawTextInImg(String filePath, String text, String outPath,int left_n, int top_n,String color,float fsize) {
        ImageIcon imgIcon = new ImageIcon(filePath);
        Image img = imgIcon.getImage();
        int width = img.getWidth(null);
        int height = img.getHeight(null);
        BufferedImage bimage = new BufferedImage(width, height,
                BufferedImage.TYPE_INT_RGB);

        Graphics2D g = bimage.createGraphics();

        int fontSize = (int)fsize;    //字體大小
        int rectX = left_n;
        int rectY = top_n;

        Font font = new Font("宋體",Font.BOLD, fontSize);   //定義字體
        g.setBackground(Color.white);
        g.drawImage(img, 0, 0, null);
        if("black".equals(color)){
            g.setPaint(Color.black);
        }else if("red".equals(color)){
            g.setPaint(Color.red);
        }
        g.setFont(font);
        g.drawString(text, rectX, top_n);
        g.dispose();

        try {
            FileOutputStream out = new FileOutputStream(outPath);
            ImageIO.write(bimage, "png", out);
            out.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

}

簡單添加文字：

在這里插入圖片描述

方法2：

public class DemoTwo {
    public void addWaterMark(String srcImgPath, String tarImgPath, String waterMarkContent,Color markContentColor,Font font) {

        try {
            // 讀取原圖片信息
            File srcImgFile = new File(srcImgPath);//得到文件
            Image srcImg = ImageIO.read(srcImgFile);//文件轉(zhuǎn)化為圖片
            int srcImgWidth = srcImg.getWidth(null);//獲取圖片的寬
            int srcImgHeight = srcImg.getHeight(null);//獲取圖片的高
            // 加水印
            BufferedImage bufImg = new BufferedImage(srcImgWidth, srcImgHeight, BufferedImage.TYPE_INT_RGB);
            Graphics2D g = bufImg.createGraphics();
            g.drawImage(srcImg, 0, 0, srcImgWidth, srcImgHeight, null);
            g.setColor(markContentColor); //根據(jù)圖片的背景設(shè)置水印顏色
            g.setFont(font);              //設(shè)置字體

            //設(shè)置水印的坐標(biāo)
            int x = srcImgWidth - 2*getWatermarkLength(waterMarkContent, g);
            int y = srcImgHeight - 2*getWatermarkLength(waterMarkContent, g);
            g.drawString(waterMarkContent, x, y);  //畫出水印
            g.dispose();
            // 輸出圖片
            FileOutputStream outImgStream = new FileOutputStream(tarImgPath);
            ImageIO.write(bufImg, "png", outImgStream);
            System.out.println("添加水印完成");
            outImgStream.flush();
            outImgStream.close();

        } catch (Exception e) {
            // TODO: handle exception
        }
    }
    public int getWatermarkLength(String waterMarkContent, Graphics2D g) {
        return g.getFontMetrics(g.getFont()).charsWidth(waterMarkContent.toCharArray(), 0, waterMarkContent.length());
    }
    public static void main(String[] args) {
        Font font = new Font("微軟雅黑", Font.PLAIN, 35);                     //水印字體
        String srcImgPath="D:\\testPhoto\\1.png"; //源圖片地址
        String tarImgPath="D:\\testPhoto\\3.png"; //待存儲的地址
        String waterMarkContent="2022北京冬奧會";  //水印內(nèi)容
        Color color=new Color(135,206,235,128);                              //水印圖片色彩以及透明度
        new WaterMarkUtils().addWaterMark(srcImgPath, tarImgPath,  waterMarkContent,color,font);

    }
}

添加之后圖片：

在這里插入圖片描述

3.圖片下載到本地指定路徑

注意，這里的下載選擇目錄是通過設(shè)置響應(yīng)的contentType實現(xiàn)，并非通過前端標(biāo)簽實現(xiàn)。下載目錄選擇頁面如下(文件名可動態(tài)設(shè)置)：

在這里插入圖片描述

測試demo：

@RestController
public class DownLoad {

    @GetMapping("/down")
    public void down(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 圖片所在服務(wù)器目錄
        String filePath = "圖片所在服務(wù)器目錄";
        
        // 創(chuàng)建文件對象
        File file = new File(filePath);
        FileInputStream fileInputStream = new FileInputStream(file);
        //設(shè)置Http響應(yīng)頭告訴瀏覽器下載圖片,下載的圖片名也是在這里設(shè)置
        response.setHeader("Content-Disposition", "attachment;Filename=自定義設(shè)置圖片名.png");
        OutputStream outputStream = response.getOutputStream();
        byte[] bytes = new byte[2048];
        int len = 0;
        while ((len = fileInputStream.read(bytes))>0){
            outputStream.write(bytes,0,len);
        }
        fileInputStream.close();
        outputStream.close();
    }
}