Java如何實現長圖文生成

作者：六月依 2017-08-21 21:00:33

開發后端

很久很久以前，就覺得微博的長圖文實現得非常有意思，將排版直接以最終的圖片輸出，收藏查看分享都很方便，現在則自己動手實現一個簡單版本的,實現一個用于生成微博長圖文樣式的包裝類。

[[200733]]

長圖文生成

很久很久以前，就覺得微博的長圖文實現得非常有意思，將排版直接以最終的圖片輸出，收藏查看分享都很方便，現在則自己動手實現一個簡單版本的

目標

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

目標拆解

支持大段文字生成圖片
支持插入圖片
支持上下左右邊距設置
支持字體選擇
支持字體顏色
支持左對齊，居中，右對齊

預期結果

我們將通過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 + "\" />"); 
}

輸出圖片

責任編輯：龐桂玉來源：六月依的博客

Java 長圖文