Java 實現長圖文生成

時間  2019-11-12
標籤 java 實現 圖文 生成 欄目 Java 简体版
原文   原文鏈接

長圖文生成

好久好久之前，就以爲微博的長圖文實現得很是有意思，將排版直接以最終的圖片輸出，收藏查看分享都很方便，如今則本身動手實現一個簡單版本的java

目標

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

目標拆解

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

預期結果

咱們將經過spring-boot搭建一個生成長圖文的http接口，經過傳入參數來指定各類配置信息，下面是一個最終調用的示意圖github

演示圖

設計&實現

長圖文的生成，採用awt進行文字繪製和圖片繪製web

1. 參數選項 ImgCreateOptions

根據咱們的預期目標，設定配置參數，基本上會包含如下參數spring

@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， 表示實際繪製的內容高度（包括上邊距），所以最終生成圖片的高度應該是app

int realH = contentH + options.getBottomPadding();spring-boot

其次簡單說一下上面的圖片輸出方法：com.hust.hui.quickmedia.common.image.ImgCreateWrapper.Builder#asImage測試

  • 計算最終生成圖片的高度（寬度由輸入參數指定）
  • 繪製背景（若是沒有背景圖片，則用純色填充）
  • 繪製實體內容（即繪製的文本，圖片）

3. 內容填充 GraphicUtil

具體的內容填充，區分爲文本繪製和圖片繪製字體

設計

  1. 考慮到在填充的過程當中，能夠自由設置字體，顏色等，因此在咱們的繪製方法中，直接實現掉內容的繪製填充，即 drawXXX 方法真正的實現了內容填充，執行完以後，內容已經填充到畫布上了

  2. 圖片繪製，考慮到圖片自己大小和最終結果的大小可能有衝突，採用下面的規則

  • 繪製圖片寬度 <=（指定生成圖片寬 - 邊距），所有填充
  • 繪製圖片寬度 >（指定生成圖片寬 - 邊距），等比例縮放繪製圖片
  1. 文本繪製，換行的問題
  • 每一行容許的文本長度有限，超過期，須要自動換行處理

文本繪製

考慮基本的文本繪製，流程以下

  • 建立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

我的博客：一灰的我的博客

公衆號獲取更多:

blogs

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程