微信小程序海报生成图片合成工具类

ゝ一世哀愁。 2022-03-24 18:40 544阅读 0赞

背景

我目前参与小程序的产品研发，为了方便产品的转发和推广，会对课提供生成海报转发或者分享的功能，前期海报合成这个功能是由项目组的老同事负责开发，后来小程序海报这块功能需要单独做一个功能用于专门根据不同的课程类型来生成海报的功能，很荣幸这个任务交由我开发。编码过程这边就略过了，直接看代码如下所示：

EmojiUtils工具类

  1. package com.xyq.maventest.util;
  3. import java.io.UnsupportedEncodingException;
  4. import java.net.URLDecoder;
  5. import java.net.URLEncoder;
  6. import java.util.regex.Matcher;
  7. import java.util.regex.Pattern;
  9. import org.apache.commons.lang.StringUtils;
  10. import org.slf4j.Logger;
  11. import org.slf4j.LoggerFactory;
  13. /***
  14.  * 
  15. * Project Name:maventest
  16. * <p>emoji标签转换工具类<br> 
  17. *
  18. * @ClassName: EmojiUtils
  19. * @date 2019年1月22日  下午4:29:26
  20. *
  21. * @author youqiang.xiong
  22. * @version 1.0
  23. * @since  
  24. * @see
  25.  */
  26. public class EmojiUtils {
  28.     private static Logger logger = LoggerFactory.getLogger(EmojiUtils.class);
  30.     /**
  31.      * 将emoji标签转换成utf8字符集保存进数据库
  32.      * @param str
  33.      * @return
  34.      */
  35.     public static String emojiConvert(String str) {
  36.         String patternString = "([\\x{10000}-\\x{10ffff}\\ud800-\\udfff])";
  37.         Pattern pattern = Pattern.compile(patternString);
  38.         Matcher matcher = pattern.matcher(str);
  39.         StringBuffer sb = new StringBuffer();
  40.         while(matcher.find()) {
  41.         //    matcher.appendReplacement(sb,"？");
  42.             try {
  43.                 matcher.appendReplacement(sb,"[[" + URLEncoder.encode(matcher.group(1),"UTF-8") + "]]");
  44.             } catch(UnsupportedEncodingException e) {
  45.                 logger.error("emojiConvert error"+ e.getMessage());
  46.                 return str;
  47.             }
  48.         }
  49.         matcher.appendTail(sb);
  50.         logger.debug("emojiConvert " + str + " to " + sb.toString() + ", len：" + sb.length());
  51.         return sb.toString();
  52.     }
  54.     /**
  55.      * 还原utf8数据库中保存的含转换后emoji表情的字符串
  56.      * @param str
  57.      * @return
  58.      */
  59.     public static String emojiRecovery(String str) {
  60.         if(StringUtils.isEmpty(str)){
  61.             return "";
  62.         }
  63.         try{
  64.             String patternString = "\\[\\[(.*?)\\]\\]";
  65.             Pattern pattern = Pattern.compile(patternString);
  66.             Matcher matcher = pattern.matcher(str);
  67.             StringBuffer sb = new StringBuffer();
  68.             while(matcher.find()) {
  69.                 try {
  70.                     matcher.appendReplacement(sb, URLDecoder.decode(matcher.group(1), "UTF-8"));
  71.                 } catch(UnsupportedEncodingException e) {
  72.                     logger.error("emojiRecovery error"+ e.getMessage());
  73.                     return "";
  74.                 }
  75.             }
  76.             matcher.appendTail(sb);
  77.             logger.debug("emojiRecovery " + str + " to " + sb.toString());
  78.             return sb.toString();
  79.         }catch (Exception e){
  80.             logger.error("emojiRecovery error",e);
  81.         }
  82.         return str;
  83.     }
  85. }

ImageUtils 工具类

核心代码如下：

  1. /***
  2.  * 
  3. * Project Name:wechat-management-util
  4. * <p>各种海报合成图片工具类<br> 
  5. *
  6. * @ClassName: ImageUtils
  7. * @date 2019年1月22日  下午3:52:43
  8. *
  9. * @author youqiang.xiong
  10. * @version 1.0
  11. * @since  
  12. * @see
  13.  */
  14. public class ImageUtils {
  15.     private static final Logger logger = LoggerFactory.getLogger(ImageUtils.class);
  16.      /****
  17.      * 
  18.     * Project Name: wechat-management-util
  19.     * <p>公开课小程序后台生成分享海报 <br> 
  20.     *
  21.     * @author youqiang.xiong
  22.     * @date 2019年1月11日  下午4:28:21
  23.     * @version v1.0
  24.     * @since 
  25.     * @param background    
  26.     *             背景图
  27.     * @param poster
  28.     *             教师形象图
  29.     * @param qr
  30.     *             二维码图片
  31.     * @param avatar
  32.     *             头像图片
  33.     * @param font
  34.     *             字体
  35.     * @param nickname
  36.     *             昵称
  37.     * @param courseName
  38.     *             课程名称
  39.     * @param courseTip
  40.     *             课程大纲
  41.     * @return 
  42.     * @throws IOException
  43.      */
  44.     public static BufferedImage createSharePoster(BufferedImage background, BufferedImage poster,
  45.             BufferedImage qr,BufferedImage avatar,Font font, String nickname,String courseName,String courseTip ) throws  IOException{
  46.         // 开启抗锯齿
  47.         RenderingHints renderingHints = new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
  48.         // 使用高质量压缩
  49.         renderingHints.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_SPEED);
  50.         renderingHints.put(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_GASP);
  51.         int height = background.getHeight() * 750 / background.getWidth();
  52.         // 图片大小
  53.         BufferedImage img = new BufferedImage(750, height, BufferedImage.TYPE_INT_RGB);
  54.         // 开启画图
  55.         Graphics2D g = (Graphics2D) img.getGraphics();
  57.         try {
  58.             g.setRenderingHints(renderingHints);
  59.             // 教师海报图 - 需要将原图进行剪切 剪切后的长度是 750*830
  60.             BufferedImage teacherImage = cutPic(poster, 158, 0, 750, 830);
  61.             g.drawImage(teacherImage.getScaledInstance(750,teacherImage.getHeight(), Image.SCALE_FAST), 0, 0, null);
  62.             // 画底图
  63.             g.drawImage(background.getScaledInstance(750, height, Image.SCALE_FAST), 0, 0, null);
  64.             // 画头像
  65.             if (null != avatar) {
  66.                 g.drawImage(ImageUtils.roundImage(avatar, avatar.getWidth(), avatar.getHeight(), 360).getScaledInstance(45*2, 45*2, Image.SCALE_FAST), 25*2, 603*2, null);
  67.             }
  68.             // 画二维码
  69.             if (null != qr) {
  70.                 g.drawImage(qr.getScaledInstance(70*2, 70*2, Image.SCALE_FAST), 286*2, 591*2, null);
  71.             }
  73.             // 设置字体大小
  74.             font = font.deriveFont(34f);
  75.             // 设置字体颜色
  76.             Color color = new Color(55,69,97);
  77.             g.setColor(color);
  78.             g.setFont(font);
  79.             //昵称 
  80.             nickname = nickname == null ? "" : nickname;
  81.             nickname = EmojiUtils.emojiRecovery(nickname);
  83.             if(nickname.length() > 5) {
  84.                 nickname = nickname.substring(0, 5) + "...";
  85.             }
  87.             int stringWidth = getWidth(g.getFontRenderContext(), g, nickname);
  88.             g.drawString(nickname, 84 * 2 , 623 * 2);
  89.             //画'向您推荐好课' 
  90.             String recommendText = "向您推荐好课";
  91.             font = font.deriveFont(24f);
  92.             // 设置字体颜色
  93.             color = new Color(55,69,97);
  94.             g.setColor(color);
  95.             g.setFont(font);
  96.             g.drawString(recommendText, 84 * 2 +  stringWidth , 623 * 2);
  98.             // 写课程名称
  99.             font = font.deriveFont(60.0f);
  100.             color = new Color(69,75,106);
  101.             g.setColor(color);
  102.             g.setFont(font);
  103.             int courseWidth = getWidth(g.getFontRenderContext(), g, courseName);
  104.             if(courseWidth >= 334*2) {
  105.                 String c1 = courseName.substring(0, 10);
  106.                 String c2 = courseName.substring(10, courseName.length());
  107.                 int courseHeight = getHeight(g.getFontRenderContext(), g, c1);
  108.                 g.drawString(c1, 21 * 2 , (430 * 2) - 2);
  109.                 g.drawString(c2, 21 * 2 , 420 * 2 + courseHeight + 2);
  111.             }else {
  112.                 g.drawString(courseName, 21 * 2 , 448 * 2);
  114.             }
  116.             //写课程大纲
  117.             List<String> tipList = Arrays.asList(courseTip.split("\n"));
  118.             String tip1 = tipList.get(0);
  119.             if(tip1.length() >= 20) {
  120.                 tip1 = tip1.substring(0, 19) + "...";
  121.             }
  122.             String tip2 = tipList.get(1);
  123.             if(tip2.length() >= 20) {
  124.                 tip2 = tip2.substring(0, 19) + "...";
  125.             }
  126.             String tip3 = tipList.get(2);
  127.             if(tip3.length() >= 20) {
  128.                 tip3 = tip3.substring(0, 19) + "...";
  129.             }
  130.             font = font.deriveFont(30.0f);
  131.             color = new Color(176,153,104);
  132.             g.setColor(color);
  133.             g.setFont(font);
  134.             g.drawString(tip1, 47 * 2 , 494 * 2);
  135.             g.drawString(tip2, 47 * 2 , 527 * 2);
  136.             g.drawString(tip3, 47 * 2 , 559 * 2);
  138.             img = Thumbnails.of(img).scale(1f).outputQuality(1f).asBufferedImage();
  139.         } catch (IOException e) {
  140.             throw  new IOException(e.getMessage());
  141.         } finally {
  142.             g.dispose();
  143.         }
  144.         return img;
  145.     }
  146. }
  148.   public static int getWidth(FontRenderContext context, Graphics2D g, String text) {
  149.         return (int) g.getFont().getStringBounds(text, context).getWidth();
  150.     }
  152.     public static int getHeight(FontRenderContext context, Graphics2D g, String text) {
  153.         return (int) g.getFont().getStringBounds(text, context).getHeight();
  154.     }
  155.   public static BufferedImage roundImage(BufferedImage image, int width, int height, int cornerRadius) {
  156.         BufferedImage outputImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
  157.         Graphics2D g2 = outputImage.createGraphics();
  158.         g2.setComposite(AlphaComposite.Src);
  159.         g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
  160.         g2.setColor(Color.WHITE);
  161.         g2.fill(new RoundRectangle2D.Float(0, 0, width, height, cornerRadius, cornerRadius));
  162.         g2.setComposite(AlphaComposite.SrcAtop);
  163.         g2.drawImage(image, 0, 0, null);
  164.         g2.dispose();
  165.         return outputImage;
  166.     }
  168.     public static BufferedImage roundImage(BufferedImage image, int cornerRadius) {
  169.         return roundImage(image, image.getWidth(), image.getHeight(), cornerRadius);
  170.     }
  172. public static Font getPingFang() {
  174.         BufferedInputStream bis = null;
  175.         Font definedFont = null;
  177.         try {
  178.             bis = new BufferedInputStream(new FileInputStream(
  179.                     "C:\\Users\\youqiang.xiong\\git\\WechatManagement\\wechat-management-parent\\wechat-management-m-web\\src\\main\\resources\\pingfang.ttf"));
  180.         } catch (FileNotFoundException e) {
  181.             e.printStackTrace();
  182.         }
  183.         try {
  184.             definedFont = Font.createFont(Font.TRUETYPE_FONT, bis);
  185.             return definedFont;
  186.         } catch (FontFormatException e) {
  187.             e.printStackTrace();
  188.         } catch (IOException e) {
  189.             e.printStackTrace();
  190.         }
  191.         return null;
  192.     }

pom.xml 新增依赖

  1. <dependency>
  2.             <groupId>net.coobird</groupId>
  3.             <artifactId>thumbnailator</artifactId>
  4.             <version>0.4.8</version>
  5.         </dependency>

编写main方法，测试合成图片

  1. public static void main(String[] args) {
  2.         try {
  3.             BufferedImage bg = ImageIO.read(new File("C:\\Users\\youqiang.xiong\\Desktop\\底图\\make_poster_base.png"));
  4.             BufferedImage poster = ImageIO.read(new File("C:\\\\Users\\\\youqiang.xiong\\\\Desktop\\\\底图\\\\poster.jpg"));
  5.              BufferedImage qr = ImageIO.read(new File("C:\\\\Users\\\\youqiang.xiong\\\\Desktop\\\\底图\\\\qr.jpg"));
  6.             BufferedImage avatar = ImageIO.read(new URL("https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTK4DYtvaMV6YIficQnj2D8CiaabaSAq1kzNZUAZCWn5oGv6n8AnjuYTH3bBqELica2yeKbYiakSUMsQIQ/132"));
  7.             String nickname = "易幻";
  8.             String courseName = "做有知识的消费者，过1%的品质生活";
  9.             String courseTip = "给人看和给人讲的PPT有什么区别？\n为什么用了模板还是很丑为什么用了模板还是很丑为什么用了模板还是很丑？\n如何体现PPT制作的专业性?";
  10.             BufferedImage img = ImageUtils.createSharePoster(bg, poster, qr, avatar, getPingFang(), nickname, courseName, courseTip);
  11.             ImageIO.write(img, "jpg", new File("C:\\Users\\youqiang.xiong\\Desktop\\底图\\result5.jpg"));
  13.         } catch (Exception e) {
  14.             e.printStackTrace();
  15.         }
  17.     }

上面的图片是读取我本地的图片，为了方便大家测试，我也把这几张底图和教师形象图上传，以便大家测试，下载图片到本地后，记得修改main方法中的图片路径

第1张海报底图make_poster_base.png
在这里插入图片描述

第2张教师形象图poster.jpg
在这里插入图片描述

第3张小程序码图片qr.jpg

在这里插入图片描述

图片准备好，运行main方法，在指定目录下会生成合成图片 如下图所示：
在这里插入图片描述

放大图片效果：

在这里插入图片描述

到这里一个完成合成小程序海报图的功能已经完成，还算是比较简单的，只需要根据ui给的设计稿来调整字体大小，颜色，xy坐标，长宽即可。

发表评论

表情：
评论列表 （有 0 条评论，544人围观）

还没有评论，来说两句吧...

相关阅读