您好,登錄后才能下訂單哦!
很久很久以前,就覺(jué)得微博的長(zhǎng)圖文實(shí)現(xiàn)得非常有意思,將排版直接以最終的圖片輸出,收藏查看分享都很方便,現(xiàn)在則自己動(dòng)手實(shí)現(xiàn)一個(gè)簡(jiǎn)單版本的
目標(biāo)
首先定義下我們預(yù)期達(dá)到的目標(biāo):根據(jù)文字 + 圖片生成長(zhǎng)圖文
目標(biāo)拆解
預(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. 封裝類(lèi) 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)沒(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
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)填充到畫(huà)布上了
圖片繪制,考慮到圖片本身大小和最終結(jié)果的大小可能有沖突,采用下面的規(guī)則
文本繪制,換行的問(wèn)題
文本繪制
考慮基本的文本繪制,流程如下
1、創(chuàng)建BufferImage對(duì)象
2、獲取Graphic2d對(duì)象,操作繪制
3、設(shè)置基本配置信息
4、文本按換行進(jìn)行拆分為字符串?dāng)?shù)組, 循環(huán)繪制單行內(nèi)容
下面是具體的實(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)題
解決這些問(wèn)題則是在 ImgCreateWrapper 的具體繪制中進(jìn)行了實(shí)現(xiàn),先看文本的繪制
根據(jù)換行符對(duì)字符串進(jìn)行拆分
計(jì)算繪制內(nèi)容最終轉(zhuǎn)換為圖片時(shí),所占用的高度
重新生成畫(huà)布 BufferedImage result
迭代繪制單行內(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); // 填寫(xiě)內(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; }
上面需要注意的是畫(huà)布的生成規(guī)則,特別是高度超過(guò)上限之后,重新計(jì)算圖片高度時(shí),需要額外注意新增的高度,應(yīng)該為基本的增量與(繪制內(nèi)容高度+下邊距)的較大值
重新生成畫(huà)布實(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ī)不徘。
新城羅隱在奇特,錢(qián)塘潘閬終崔嵬。
陰兮魄兮曷往,陽(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 + "\" />"); }
輸出圖片
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。