當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

java图文生成

發(fā)布時(shí)間：2024/3/26 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 java图文生成小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

目標(biāo)

首先定義下我們預(yù)期達(dá)到的目標(biāo)：根據(jù)文字 + 圖片生成長(zhǎng)圖文

目標(biāo)拆解

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

預(yù)期結(jié)果

我們將通過(guò)spring-boot搭建一個(gè)生成長(zhǎng)圖文的http接口，通過(guò)傳入?yún)?shù)來(lái)指定各種配置信息，下面是一個(gè)最終調(diào)用的示意圖

設(shè)計(jì)&實(shí)現(xiàn)

長(zhǎng)圖文的生成，采用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) {// xxxreturn 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) {// xxxreturn 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)沒(méi)有，后面詳細(xì)講解，這里主要關(guān)注的是一個(gè)參數(shù) contentH，表示實(shí)際繪制的內(nèi)容高度（包括上邊距），因此最終生成圖片的高度應(yīng)該是

int realH = contentH + options.getBottomPadding();

其次簡(jiǎn)單說(shuō)一下上面的圖片輸出方法：com.hust.hui.quickmedia.common.image.ImgCreateWrapper.Builder#asImage

計(jì)算最終生成圖片的高度（寬度由輸入?yún)?shù)指定）
繪制背景（如果沒(méi)有背景圖片，則用純色填充）
繪制實(shí)體內(nèi)容（即繪制的文本，圖片）

3. 內(nèi)容填充 GraphicUtil

具體的內(nèi)容填充，區(qū)分為文本繪制和圖片繪制

設(shè)計(jì)

考慮到在填充的過(guò)程中，可以自由設(shè)置字體，顏色等，所以在我們的繪制方法中，直接實(shí)現(xiàn)掉內(nèi)容的繪制填充，即 drawXXX 方法真正的實(shí)現(xiàn)了內(nèi)容填充，執(zhí)行完之后，內(nèi)容已經(jīng)填充到畫布上了

圖片繪制，考慮到圖片本身大小和最終結(jié)果的大小可能有沖突，采用下面的規(guī)則

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

文本繪制，換行的問(wèn)題

每一行允許的文本長(zhǎng)度有限，超過(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ì)長(zhǎng)串字符串進(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 字符串總長(zhǎng)* @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;} }/*** 按照長(zhǎng)度對(duì)字符串進(jìn)行分割* <p>* fixme 包含emoj表情時(shí)，兼容一把** @param str 原始字符串* @param splitLen 分割的長(zhǎng)度* @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)比較清晰了，圖片的繪制則更加簡(jiǎ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)容（如一段文字，一張圖片）的渲染，存在一些問(wèn)題

繪制的內(nèi)容超過(guò)畫布的高度如何處理
文本繪制要求傳入的文本沒(méi)有換行符，否則換行不生效
交叉繪制的場(chǎng)景，如何重新計(jì)算y坐標(biāo)

解決這些問(wèn)題則是在 ImgCreateWrapper 的具體繪制中進(jìn)行了實(shí)現(xiàn)，先看文本的繪制

根據(jù)換行符對(duì)字符串進(jìn)行拆分
計(jì)算繪制內(nèi)容最終轉(zhuǎn)換為圖片時(shí)，所占用的高度
重新生成畫布 BufferedImage result
- 如果result為空，則直接生成
- 如果最終生成的高度，超過(guò)已有畫布的高度，則生成一個(gè)更高的畫布，并將原來(lái)的內(nèi)容繪制上去
迭代繪制單行內(nèi)容

public Builder drawContent(String content) {String[] strs = StringUtils.split(content, "\n");if (strs.length == 0) { // empty linestrs = 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()) {// 超過(guò)原來(lái)圖片高度的上限, 則需要擴(kuò)充圖片長(zhǎng)度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ī)則，特別是高度超過(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; }

上面理解之后，繪制圖片就比較簡(jiǎn)單了，基本上行沒(méi)什么差別

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()) {// 超過(guò)閥值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接口，用于生成長(zhǎng)圖文，最終的成果就是我們開(kāi)頭的那個(gè)gif圖的效果，相關(guān)代碼就沒(méi)啥好說(shuō)的，有興趣的可以直接查看工程源碼，鏈接看最后

測(cè)試驗(yàn)證

上面基本上完成了我們預(yù)期的目標(biāo)，接下來(lái)則是進(jìn)行驗(yàn)證，測(cè)試代碼比較簡(jiǎn)單，先準(zhǔn)備一段文本，這里拉了一首詩(shī)

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

測(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 + "\" />"); }

?https://github.com/liuyueyi/quick-media

總結(jié)

以上是生活随笔為你收集整理的java图文生成的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

JAVA
图文

上一篇：远程桌面监控系统java_基于Java的
下一篇：计算机网什么是cih病毒,CIH病毒是什