Java 實作長圖文生成

長圖文生成

很久很久以前，就覺得微網誌的長圖文實作得非常有意思，将排版直接以最終的圖檔輸出，收藏檢視分享都很友善，現在則自己動手實作一個簡單版本的

目标

首先定義下我們預期達到的目标：根據文字 + 圖檔生成長圖文

目标拆解

支援大段文字生成圖檔
支援插入圖檔
支援上下左右邊距設定
支援字型選擇
支援字型顔色
支援左對齊，居中，右對齊

預期結果

我們将通過spring-boot搭建一個生成長圖文的http接口，通過傳入參數來指定各種配置資訊，下面是一個最終調用的示意圖

設計&實作

長圖文的生成，采用awt進行文字繪制和圖檔繪制

1. 參數選項 `ImgCreateOptions`

根據我們的預期目标，設定配置參數，基本上會包含以下參數

@Getter
@Setter
@ToString
public class ImgCreateOptions {

    /**
     * 繪制的背景圖
     */
    private BufferedImage bgImg;


    /**
     * 生成圖檔的寬
     */
    private Integer imgW;


    private Font font = new Font("宋體", Font.PLAIN, 18);

    /**
     * 字型色
     */
    private Color fontColor = Color.BLACK;


    /**
     * 兩邊邊距
     */
    private int leftPadding;

    /**
     * 上邊距
     */
    private int topPadding;

    /**
     * 底邊距
     */
    private int bottomPadding;

    /**
     * 行距
     */
    private int linePadding;


    private AlignStyle alignStyle;

    /**
     * 對齊方式
     */
    public enum AlignStyle {
        LEFT,
        CENTER,
        RIGHT;


        private static Map<String, AlignStyle> map = new HashMap<>();

        static {
            for(AlignStyle style: AlignStyle.values()) {
                map.put(style.name(), style);
            }
        }


        public static AlignStyle getStyle(String name) {
            name = name.toUpperCase();
            if (map.containsKey(name)) {
                return map.get(name);
            }

            return LEFT;
        }
    }
}

2. 封裝類 `ImageCreateWrapper`

封裝配置參數的設定，繪制文本，繪制圖檔的操作方式，輸出樣式等接口

public class ImgCreateWrapper {


    public static Builder build() {
        return new Builder();
    }


    public static class Builder {
        /**
         * 生成的圖檔建立參數
         */
        private ImgCreateOptions options = new ImgCreateOptions();


        /**
         * 輸出的結果
         */
        private BufferedImage result;


        private final int addH = 1000;


        /**
         * 實際填充的内容高度
         */
        private int contentH;


        private Color bgColor;

        public Builder setBgColor(int color) {
            return setBgColor(ColorUtil.int2color(color));
        }

        /**
         * 設定背景圖
         *
         * @param bgColor
         * @return
         */
        public Builder setBgColor(Color bgColor) {
            this.bgColor = bgColor;
            return this;
        }


        public Builder setBgImg(BufferedImage bgImg) {
            options.setBgImg(bgImg);
            return this;
        }


        public Builder setImgW(int w) {
            options.setImgW(w);
            return this;
        }

        public Builder setFont(Font font) {
            options.setFont(font);
            return this;
        }

        public Builder setFontName(String fontName) {
            Font font = options.getFont();
            options.setFont(new Font(fontName, font.getStyle(), font.getSize()));
            return this;
        }


        public Builder setFontColor(int fontColor) {
            return setFontColor(ColorUtil.int2color(fontColor));
        }

        public Builder setFontColor(Color fontColor) {
            options.setFontColor(fontColor);
            return this;
        }

        public Builder setFontSize(Integer fontSize) {
            Font font = options.getFont();
            options.setFont(new Font(font.getName(), font.getStyle(), fontSize));
            return this;
        }

        public Builder setLeftPadding(int leftPadding) {
            options.setLeftPadding(leftPadding);
            return this;
        }

        public Builder setTopPadding(int topPadding) {
            options.setTopPadding(topPadding);
            contentH = topPadding;
            return this;
        }

        public Builder setBottomPadding(int bottomPadding) {
            options.setBottomPadding(bottomPadding);
            return this;
        }

        public Builder setLinePadding(int linePadding) {
            options.setLinePadding(linePadding);
            return this;
        }

        public Builder setAlignStyle(String style) {
            return setAlignStyle(ImgCreateOptions.AlignStyle.getStyle(style));
        }

        public Builder setAlignStyle(ImgCreateOptions.AlignStyle alignStyle) {
            options.setAlignStyle(alignStyle);
            return this;
        }


        public Builder drawContent(String content) {
            // xxx
            return this;
        }


        public Builder drawImage(String img) {
            BufferedImage bfImg;
            try {
                 bfImg = ImageUtil.getImageByPath(img);
            } catch (IOException e) {
                log.error("load draw img error! img: {}, e:{}", img, e);
                throw new IllegalStateException("load draw img error! img: " + img, e);
            }

            return drawImage(bfImg);
        }


        public Builder drawImage(BufferedImage bufferedImage) {

           // xxx
           return this;
        }


        public BufferedImage asImage() {
            int realH = contentH + options.getBottomPadding();

            BufferedImage bf = new BufferedImage(options.getImgW(), realH, BufferedImage.TYPE_INT_ARGB);
            Graphics2D g2d = bf.createGraphics();

            if (options.getBgImg() == null) {
                g2d.setColor(bgColor == null ? Color.WHITE : bgColor);
                g2d.fillRect(0, 0, options.getImgW(), realH);
            } else {
                g2d.drawImage(options.getBgImg(), 0, 0, options.getImgW(), realH, null);
            }

            g2d.drawImage(result, 0, 0, null);
            g2d.dispose();
            return bf;
        }


        public String asString() throws IOException {
            BufferedImage img = asImage();
            return Base64Util.encode(img, "png");
        }
}

上面具體的文本和圖檔繪制實作沒有，後面詳細講解，這裡主要關注的是一個參數

contentH

，表示實際繪制的内容高度（包括上邊距），是以最終生成圖檔的高度應該是

int realH = contentH + options.getBottomPadding();

其次簡單說一下上面的圖檔輸出方法：

com.hust.hui.quickmedia.common.image.ImgCreateWrapper.Builder#asImage

計算最終生成圖檔的高度（寬度由輸入參數指定）
繪制背景（如果沒有背景圖檔，則用純色填充）
繪制實體内容（即繪制的文本，圖檔）

3. 内容填充 `GraphicUtil`

具體的内容填充，區分為文本繪制和圖檔繪制

設計

考慮到在填充的過程中，可以自由設定字型，顔色等，是以在我們的繪制方法中，直接實作掉内容的繪制填充，即 drawXXX 方法真正的實作了内容填充，執行完之後，内容已經填充到畫布上了
圖檔繪制，考慮到圖檔本身大小和最終結果的大小可能有沖突，采用下面的規則

繪制圖檔寬度 <=（指定生成圖檔寬 - 邊距），全部填充
繪制圖檔寬度 >（指定生成圖檔寬 - 邊距），等比例縮放繪制圖檔

文本繪制，換行的問題

每一行允許的文本長度有限，超過時，需要自動換行處理

文本繪制

考慮基本的文本繪制，流程如下

建立 BufferImage 對象
擷取 Graphic2d 對象，操作繪制
設定基本配置資訊
文本按換行進行拆分為字元串數組, 循環繪制單行内容

計算當行字元串，實際繪制的行數，然後進行拆分
依次繪制文本（需要注意y坐标的變化）

下面是具體的實作

public static int drawContent(Graphics2D g2d,
                                  String content,
                                  int y,
                                  ImgCreateOptions options) {

    int w = options.getImgW();
    int leftPadding = options.getLeftPadding();
    int linePadding = options.getLinePadding();
    Font font = options.getFont();


    // 一行容納的字元個數
    int lineNum = (int) Math.floor((w - (leftPadding << 1)) / (double) font.getSize());

    // 對長串字元串進行分割成多行進行繪制
    String[] strs = splitStr(content, lineNum);

    g2d.setFont(font);

    g2d.setColor(options.getFontColor());
    int index = 0;
    int x;
    for (String tmp : strs) {
        x = calOffsetX(leftPadding, w, tmp.length() * font.getSize(), options.getAlignStyle());
        g2d.drawString(tmp, x, y + (linePadding + font.getSize()) * index);
        index++;
    }


    return y + (linePadding + font.getSize()) * (index);
}

/**
 * 計算不同對其方式時，對應的x坐标
 *
 * @param padding 左右邊距
 * @param width   圖檔總寬
 * @param strSize 字元串總長
 * @param style   對其方式
 * @return 傳回計算後的x坐标
 */
private static int calOffsetX(int padding,
                              int width,
                              int strSize,
                              ImgCreateOptions.AlignStyle style) {
    if (style == ImgCreateOptions.AlignStyle.LEFT) {
        return padding;
    } else if (style == ImgCreateOptions.AlignStyle.RIGHT) {
        return width - padding - strSize;
    } else {
        return (width - strSize) >> 1;
    }
}


/**
 * 按照長度對字元串進行分割
 * <p>
 * fixme 包含emoj表情時，相容一把
 *
 * @param str      原始字元串
 * @param splitLen 分割的長度
 * @return
 */
public static String[] splitStr(String str, int splitLen) {
    int len = str.length();
    int size = (int) Math.ceil(len / (float) splitLen);

    String[] ans = new String[size];
    int start = 0;
    int end = splitLen;
    for (int i = 0; i < size; i++) {
        ans[i] = str.substring(start, end > len ? len : end);
        start = end;
        end += splitLen;
    }

    return ans;
}

上面的實作比較清晰了，圖檔的繪制則更加簡單

圖檔繪制

隻需要重新計算下待繪制圖檔的寬高即可，具體實作如下

/**
 * 在原圖上繪制圖檔
 *
 * @param source  原圖
 * @param dest    待繪制圖檔
 * @param y       待繪制的y坐标
 * @param options
 * @return 繪制圖檔的高度
 */
public static int drawImage(BufferedImage source,
                            BufferedImage dest,
                            int y,
                            ImgCreateOptions options) {
    Graphics2D g2d = getG2d(source);
    int w = Math.min(dest.getWidth(), options.getImgW() - (options.getLeftPadding() << 1));
    int h = w * dest.getHeight() / dest.getWidth();

    int x = calOffsetX(options.getLeftPadding(),
            options.getImgW(), w, options.getAlignStyle());

    // 繪制圖檔
    g2d.drawImage(dest,
            x,
            y + options.getLinePadding(),
            w,
            h,
            null);
    g2d.dispose();

    return h;
}

public static Graphics2D getG2d(BufferedImage bf) {
        Graphics2D g2d = bf.createGraphics();

    g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
    g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
    g2d.setRenderingHint(RenderingHints.KEY_DITHERING, RenderingHints.VALUE_DITHER_ENABLE);
    g2d.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
    g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
    g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
    g2d.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);

    return g2d;
}

4. 内容渲染

前面隻是給出了單塊内容（如一段文字，一張圖檔）的渲染，存在一些問題

繪制的内容超過畫布的高度如何處理
文本繪制要求傳入的文本沒有換行符，否則換行不生效
交叉繪制的場景，如何重新計算y坐标

解決這些問題則是在

ImgCreateWrapper

的具體繪制中進行了實作，先看文本的繪制

根據換行符對字元串進行拆分
計算繪制内容最終轉換為圖檔時，所占用的高度
重新生成畫布 BufferedImage result

如果result為空，則直接生成
如果最終生成的高度，超過已有畫布的高度，則生成一個更高的畫布，并将原來的内容繪制上去

疊代繪制單行内容

public Builder drawContent(String content) {
    String[] strs = StringUtils.split(content, "\n");
    if (strs.length == 0) { // empty line
        strs = new String[1];
        strs[0] = " ";
    }

    int fontSize = options.getFont().getSize();
    int lineNum = calLineNum(strs, options.getImgW(), options.getLeftPadding(), fontSize);
    // 填寫内容需要占用的高度
    int height = lineNum * (fontSize + options.getLinePadding());

    if (result == null) {
        result = GraphicUtil.createImg(options.getImgW(),
                Math.max(height + options.getTopPadding() + options.getBottomPadding(), BASE_ADD_H),
                null);
    } else if (result.getHeight() < contentH + height + options.getBottomPadding()) {
        // 超過原來圖檔高度的上限, 則需要擴充圖檔長度
        result = GraphicUtil.createImg(options.getImgW(),
                result.getHeight() + Math.max(height + options.getBottomPadding(), BASE_ADD_H),
                result);
    }


    // 繪制文字
    Graphics2D g2d = GraphicUtil.getG2d(result);
    int index = 0;
    for (String str : strs) {
        GraphicUtil.drawContent(g2d, str,
                contentH + (fontSize + options.getLinePadding()) * (++index)
                , options);
    }
    g2d.dispose();

    contentH += height;
    return this;
}


/**
 * 計算總行數
 *
 * @param strs     字元串清單
 * @param w        生成圖檔的寬
 * @param padding  渲染内容的左右邊距
 * @param fontSize 字型大小
 * @return
 */
private int calLineNum(String[] strs, int w, int padding, int fontSize) {
    // 每行的字元數
    double lineFontLen = Math.floor((w - (padding << 1)) / (double) fontSize);


    int totalLine = 0;
    for (String str : strs) {
        totalLine += Math.ceil(str.length() / lineFontLen);
    }

    return totalLine;
}

上面需要注意的是畫布的生成規則，特别是高度超過上限之後，重新計算圖檔高度時，需要額外注意新增的高度，應該為基本的增量與（繪制内容高度+下邊距）的較大值

int realAddH = Math.max(bufferedImage.getHeight() + options.getBottomPadding() + options.getTopPadding(), BASE_ADD_H)

重新生成畫布實作

com.hust.hui.quickmedia.common.util.GraphicUtil#createImg

public static BufferedImage createImg(int w, int h, BufferedImage img) {
    BufferedImage bf = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
    Graphics2D g2d = bf.createGraphics();

    if (img != null) {
        g2d.setComposite(AlphaComposite.Src);
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g2d.drawImage(img, 0, 0, null);
    }
    g2d.dispose();
    return bf;
}

上面了解之後，繪制圖檔就比較簡單了，基本上行沒什麼差别

public Builder drawImage(String img) {
    BufferedImage bfImg;
    try {
        bfImg = ImageUtil.getImageByPath(img);
    } catch (IOException e) {
        log.error("load draw img error! img: {}, e:{}", img, e);
        throw new IllegalStateException("load draw img error! img: " + img, e);
    }

    return drawImage(bfImg);
}


public Builder drawImage(BufferedImage bufferedImage) {

    if (result == null) {
        result = GraphicUtil.createImg(options.getImgW(),
                Math.max(bufferedImage.getHeight() + options.getBottomPadding() + options.getTopPadding(), BASE_ADD_H),
                null);
    } else if (result.getHeight() < contentH + bufferedImage.getHeight() + options.getBottomPadding()) {
        // 超過閥值
        result = GraphicUtil.createImg(options.getImgW(),
                result.getHeight() + Math.max(bufferedImage.getHeight() + options.getBottomPadding() + options.getTopPadding(), BASE_ADD_H),
                result);
    }

    // 更新實際高度
    int h = GraphicUtil.drawImage(result,
            bufferedImage,
            contentH,
            options);
    contentH += h + options.getLinePadding();
    return this;
}

5. http接口

上面實作的生成圖檔的公共方法，在

quick-media

工程中，利用spring-boot搭建了一個web服務，提供了一個http接口，用于生成長圖文，最終的成果就是我們開頭的那個gif圖的效果，相關代碼就沒啥好說的，有興趣的可以直接檢視工程源碼，連結看最後

測試驗證

上面基本上完成了我們預期的目标，接下來則是進行驗證，測試代碼比較簡單，先準備一段文本，這裡拉了一首詩

招魂酹翁賓旸
鄭起

君之在世帝敕下，君之謝世帝敕回。
魂之為變性原返，氣之為物情本開。
於戲龍兮鳳兮神氣盛，噫嘻鬼兮歸兮大塊埃。
身可朽名不可朽，骨可灰神不可灰。
采石捉月李白非醉，耒陽避水子美非災。
長孫王吉命不夭，玉川老子詩不徘。
新城羅隐在奇特，錢塘潘阆終崔嵬。
陰兮魄兮曷往，陽兮魄兮曷來。
君其歸來，故交寥落更散漫。
君來歸來，帝城絢爛可徘徊。
君其歸來，東西南北不可去。
君其歸來。
春秋霜露令人哀。
花之明吾無與笑，葉之隕吾實若摧。
曉猿嘯吾聞淚堕，宵鶴立吾見心猜。
玉泉其清可鑒，西湖其甘可杯。
孤山暖梅香可嗅，花翁葬薦菊之隈。
君其歸來，可伴逋仙之梅，去此又奚之哉。

測試代碼

@Test
public void testGenImg() throws IOException {
    int w = 400;
    int leftPadding = 10;
    int topPadding = 40;
    int bottomPadding = 40;
    int linePadding = 10;
    Font font = new Font("宋體", Font.PLAIN, 18);

    ImgCreateWrapper.Builder build = ImgCreateWrapper.build()
            .setImgW(w)
            .setLeftPadding(leftPadding)
            .setTopPadding(topPadding)
            .setBottomPadding(bottomPadding)
            .setLinePadding(linePadding)
            .setFont(font)
            .setAlignStyle(ImgCreateOptions.AlignStyle.CENTER)
//                .setBgImg(ImageUtil.getImageByPath("qrbg.jpg"))
            .setBgColor(0xFFF7EED6)
            ;


    BufferedReader reader = FileReadUtil.createLineRead("text/poem.txt");
    String line;
    int index = 0;
    while ((line = reader.readLine()) != null) {
        build.drawContent(line);

        if (++index == 5) {
            build.drawImage(ImageUtil.getImageByPath("https://static.oschina.net/uploads/img/201708/12175633_sOfz.png"));
        }

        if (index == 7) {
            build.setFontSize(25);
        }

        if (index == 10) {
            build.setFontSize(20);
            build.setFontColor(Color.RED);
        }
    }

    BufferedImage img = build.asImage();
    String out = Base64Util.encode(img, "png");
    System.out.println("<img src=\"data:image/png;base64," + out + "\" />");
}

輸出圖檔

其他

項目位址: https://github.com/liuyueyi/quick-media

個人部落格：一灰的個人部落格

Java 實作長圖文生成

長圖文生成

目标

目标拆解

預期結果

設計&實作

1. 參數選項 `ImgCreateOptions`

2. 封裝類 `ImageCreateWrapper`

3. 内容填充 `GraphicUtil`

設計

文本繪制

圖檔繪制

4. 内容渲染

5. http接口

測試驗證

其他

繼續閱讀

鋼鐵平面焊接的缺陷檢測案例【附代碼】

python畫一隻雪融融

機器視覺在零部件【尺寸測量】檢測技術方面的應用分析

在Linux終端中查找域名對應的IP位址

揭秘手機金屬外殼加工工藝

DA-GAN: Instance-level Image Translation by Deep Attention Generative Adversarial Networks

自動駕駛之點雲與圖像融合綜述

PBOC/EMV-交易流程詳解--POS與卡片的資料互動進行分析

PAT (Advanced Level) Practise 1095 Cars on Campus (30)

PAT (Advanced Level) Practise 1016 Phone Bills (25)

PAT (Advanced Level) Practise 1061 Dating (20)

PAT (Advanced Level) Practise 1026 Table Tennis (30)

openGL API之glFramebufferTexture2D函數詳解

用Cocos2d -android1開發了個2048

HDU 5276 YJC tricks time

Docker - Docker Volume及Volume指令詳解

Java 實作長圖文生成

長圖文生成

目标

目标拆解

預期結果

設計&實作

1. 參數選項 ​ ​ImgCreateOptions​ ​

2. 封裝類 ​ ​ImageCreateWrapper​ ​

3. 内容填充 ​ ​GraphicUtil​ ​

設計

文本繪制

圖檔繪制

4. 内容渲染

5. http接口

測試驗證

其他

繼續閱讀

1. 參數選項 `ImgCreateOptions`

2. 封裝類 `ImageCreateWrapper`

3. 内容填充 `GraphicUtil`