Java如何實(shí)現(xiàn)長圖文生成
作者：六月依
很久很久以前，就覺得微博的長圖文實(shí)現(xiàn)得非常有意思，將排版直接以最終的圖片輸出，收藏查看分享都很方便，現(xiàn)在則自己動(dòng)手實(shí)現(xiàn)一個(gè)簡單版本的,實(shí)現(xiàn)一個(gè)用于生成微博長圖文樣式的包裝類。
長圖文生成
很久很久以前，就覺得微博的長圖文實(shí)現(xiàn)得非常有意思，將排版直接以最終的圖片輸出，收藏查看分享都很方便，現(xiàn)在則自己動(dòng)手實(shí)現(xiàn)一個(gè)簡單版本的
目標(biāo)
首先定義下我們預(yù)期達(dá)到的目標(biāo)：根據(jù)文字 + 圖片生成長圖文
目標(biāo)拆解
- 支持大段文字生成圖片
- 支持插入圖片
- 支持上下左右邊距設(shè)置
- 支持字體選擇
- 支持字體顏色
- 支持左對(duì)齊，居中，右對(duì)齊
預(yù)期結(jié)果
我們將通過spring-boot搭建一個(gè)生成長圖文的http接口，通過傳入?yún)?shù)來指定各種配置信息，下面是一個(gè)最終調(diào)用的示意圖
設(shè)計(jì)&實(shí)現(xiàn)
長圖文的生成，采用awt進(jìn)行文字繪制和圖片繪制
1. 參數(shù)選項(xiàng) ImgCreateOptions
根據(jù)我們的預(yù)期目標(biāo)，設(shè)定配置參數(shù)，基本上會(huì)包含以下參數(shù)
- @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;
- /**
- * 對(duì)齊方式
- */
- 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
封裝配置參數(shù)的設(shè)置，繪制文本，繪制圖片的操作方式，輸出樣式等接口
- public class ImgCreateWrapper {
- public static Builder build() {
- return new Builder();
- }
- public static class Builder {
- /**
- * 生成的圖片創(chuàng)建參數(shù)
- */
- private ImgCreateOptions options = new ImgCreateOptions();
- /**
- * 輸出的結(jié)果
- */
- private BufferedImage result;
- private final int addH = 1000;
- /**
- * 實(shí)際填充的內(nèi)容高度
- */
- private int contentH;
- private Color bgColor;
- public Builder setBgColor(int color) {
- return setBgColor(ColorUtil.int2color(color));
- }
- /**
- * 設(shè)置背景圖
- *
- * @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");
- }
- }
上面具體的文本和圖片繪制實(shí)現(xiàn)沒有，后面詳細(xì)講解，這里主要關(guān)注的是一個(gè)參數(shù) contentH， 表示實(shí)際繪制的內(nèi)容高度(包括上邊距)，因此最終生成圖片的高度應(yīng)該是
int realH = contentH + options.getBottomPadding();
其次簡單說一下上面的圖片輸出方法：com.hust.hui.quickmedia.common.image.ImgCreateWrapper.Builder#asImage
- 計(jì)算最終生成圖片的高度(寬度由輸入?yún)?shù)指定)
- 繪制背景(如果沒有背景圖片，則用純色填充)
- 繪制實(shí)體內(nèi)容(即繪制的文本，圖片)
3. 內(nèi)容填充 GraphicUtil
具體的內(nèi)容填充，區(qū)分為文本繪制和圖片繪制
設(shè)計(jì)
- 考慮到在填充的過程中，可以自由設(shè)置字體，顏色等，所以在我們的繪制方法中，直接實(shí)現(xiàn)掉內(nèi)容的繪制填充，即 drawXXX 方法真正的實(shí)現(xiàn)了內(nèi)容填充，執(zhí)行完之后，內(nèi)容已經(jīng)填充到畫布上了
- 圖片繪制，考慮到圖片本身大小和最終結(jié)果的大小可能有沖突，采用下面的規(guī)則
- 繪制圖片寬度 <=(指定生成圖片寬 - 邊距)，全部填充
- 繪制圖片寬度 >(指定生成圖片寬 - 邊距)，等比例縮放繪制圖片
- 文本繪制，換行的問題
- 每一行允許的文本長度有限，超過時(shí)，需要自動(dòng)換行處理
文本繪制
考慮基本的文本繪制，流程如下
- 創(chuàng)建BufferImage對(duì)象
- 獲取Graphic2d對(duì)象，操作繪制
- 設(shè)置基本配置信息
- 文本按換行進(jìn)行拆分為字符串?dāng)?shù)組, 循環(huán)繪制單行內(nèi)容
- 計(jì)算當(dāng)行字符串，實(shí)際繪制的行數(shù)，然后進(jìn)行拆分
- 依次繪制文本(需要注意y坐標(biāo)的變化)
下面是具體的實(shí)現(xiàn)
- 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();
- // 一行容納的字符個(gè)數(shù)
- int lineNum = (int) Math.floor((w - (leftPadding << 1)) / (double) font.getSize());
- // 對(duì)長串字符串進(jìn)行分割成多行進(jìn)行繪制
- 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);
- }
- /**
- * 計(jì)算不同對(duì)其方式時(shí)，對(duì)應(yīng)的x坐標(biāo)
- *
- * @param padding 左右邊距
- * @param width 圖片總寬
- * @param strSize 字符串總長
- * @param style 對(duì)其方式
- * @return 返回計(jì)算后的x坐標(biāo)
- */
- 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;
- }
- }
- /**
- * 按照長度對(duì)字符串進(jìn)行分割
- * <p>
- * fixme 包含emoj表情時(shí)，兼容一把
- *
- * @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;
- }
上面的實(shí)現(xiàn)比較清晰了，圖片的繪制則更加簡單
圖片繪制
只需要重新計(jì)算下待繪制圖片的寬高即可，具體實(shí)現(xiàn)如下
- /**
- * 在原圖上繪制圖片
- *
- * @param source 原圖
- * @param dest 待繪制圖片
- * @param y 待繪制的y坐標(biāo)
- * @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. 內(nèi)容渲染
前面只是給出了單塊內(nèi)容(如一段文字，一張圖片)的渲染，存在一些問題
- 繪制的內(nèi)容超過畫布的高度如何處理
- 文本繪制要求傳入的文本沒有換行符，否則換行不生效
- 交叉繪制的場景，如何重新計(jì)算y坐標(biāo)
解決這些問題則是在 ImgCreateWrapper 的具體繪制中進(jìn)行了實(shí)現(xiàn)，先看文本的繪制
- 根據(jù)換行符對(duì)字符串進(jìn)行拆分
- 計(jì)算繪制內(nèi)容最終轉(zhuǎn)換為圖片時(shí)，所占用的高度
- 重新生成畫布 BufferedImage result
- 如果result為空，則直接生成
- 如果最終生成的高度，超過已有畫布的高度，則生成一個(gè)更高的畫布，并將原來的內(nèi)容繪制上去
- 迭代繪制單行內(nèi)容
- 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);
- // 填寫內(nèi)容需要占用的高度
- 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()) {
- // 超過原來圖片高度的上限, 則需要擴(kuò)充圖片長度
- 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;
- }
- /**
- * 計(jì)算總行數(shù)
- *
- * @param strs 字符串列表
- * @param w 生成圖片的寬
- * @param padding 渲染內(nèi)容的左右邊距
- * @param fontSize 字體大小
- * @return
- */
- private int calLineNum(String[] strs, int w, int padding, int fontSize) {
- // 每行的字符數(shù)
- double lineFontLen = Math.floor((w - (padding << 1)) / (double) fontSize);
- int totalLine = 0;
- for (String str : strs) {
- totalLine += Math.ceil(str.length() / lineFontLen);
- }
- return totalLine;
- }
上面需要注意的是畫布的生成規(guī)則，特別是高度超過上限之后，重新計(jì)算圖片高度時(shí)，需要額外注意新增的高度，應(yīng)該為基本的增量與(繪制內(nèi)容高度+下邊距)的較大值
- int realAddH = Math.max(bufferedImage.getHeight() + options.getBottomPadding() + options.getTopPadding(), BASE_ADD_H)
重新生成畫布實(shí)現(xiàn) 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);
- }
- // 更新實(shí)際高度
- int h = GraphicUtil.drawImage(result,
- bufferedImage,
- contentH,
- options);
- contentH += h + options.getLinePadding();
- return this;
- }
5. http接口
上面實(shí)現(xiàn)的生成圖片的公共方法，在 quick-media 工程中，利用spring-boot搭建了一個(gè)web服務(wù)，提供了一個(gè)http接口，用于生成長圖文，最終的成果就是我們開頭的那個(gè)gif圖的效果，相關(guān)代碼就沒啥好說的，有興趣的可以直接查看工程源碼，鏈接看最后
測(cè)試驗(yàn)證
上面基本上完成了我們預(yù)期的目標(biāo)，接下來則是進(jìn)行驗(yàn)證，測(cè)試代碼比較簡單，先準(zhǔn)備一段文本，這里拉了一首詩
招魂酹翁賓旸
鄭起
君之在世帝敕下，君之謝世帝敕回。
魂之為變性原返，氣之為物情本開。
於戲龍兮鳳兮神氣盛，噫嘻鬼兮歸兮大塊埃。
身可朽名不可朽，骨可灰神不可灰。
采石捉月李白非醉，耒陽避水子美非災(zāi)。
長孫王吉命不夭，玉川老子詩不徘。
新城羅隱在奇特，錢塘潘閬終崔嵬。
陰兮魄兮曷往，陽兮魄兮曷來。
君其歸來，故交寥落更散漫。
君來歸來，帝城絢爛可徘徊。
君其歸來，東西南北不可去。
君其歸來。
春秋霜露令人哀。
花之明吾無與笑，葉之隕吾實(shí)若摧。
曉猿嘯吾聞淚墮，宵鶴立吾見心猜。
玉泉其清可鑒，西湖其甘可杯。
孤山暖梅香可嗅，花翁葬薦菊之隈。
君其歸來，可伴逋仙之梅，去此又奚之哉。
測(cè)試代碼
- @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 + "\" />");
- }
輸出圖片
責(zé)任編輯：龐桂玉
來源：
六月依的博客
