一、概述
在做小程序二维码开发或其他应用中，经常会看到这样的需求。为了推广小程序二维码，需要在原小程序码的基础上绘制一张完整的分享图，生成图片后，可以让用户进行保存，并发布到朋友圈或其他社交平台进行分享。
虽然小程序本身支持长按识别二维码进入小程序，不过单纯的二维码实在过于单调，而我们可以在二维码基础上进行优化，比如界面，美观程度，文字描述等等。
类似以下图片这种：
小程序二维码分享图.png
而实现这种方式的话，大致也分为两种，一种是前端生成，另一种是后端生成后，上传至图片服务器，然后接口返回图片服务器的地址；而我们采用的是第二种方式。
二、实现
简单说明一下：
- 使用编程语言是Java，而相应的JDK版本是1.8。本文只学习图片的处理，不牵涉到小程序二维码的获取，如果要了解二维码的获取，可自行查看微信开发文档SDK。
- 在Java中实现这种图片相关的操作，使用的是AWT和Swing技术，由于以前学习Java的时候基本上都是Web相关的，对这两者了解的比较少，所以这次也算是边学习边操作了。
- 最终实现的效果是：底层是一张背景图，背景图上有微信头像和昵称，下面是小程序二维码及二维码识别图，共涉及到4张图片。
- 我们以本地环境举例，后续会简单说下测试及生产环境可能会出现的问题；
实现步骤如下：
- 根据背景图构建
BufferedImage：
String background = "D://background.jpg";
BufferedImage zoomPicture = ImageIO.read(new File(background));
- 将头像裁剪成圆形：
/**
* 对头像处理
*
* @param image the image
* @param radius the radius
* @return the buffered image
* @throws Exception the exception
*/
public static BufferedImage createRoundedImage(String image, int radius) throws Exception{
BufferedImage img = ImageIO.read(new File(image));
// 1. 按原比例缩减
BufferedImage fixedImg = getScaledImage(img, radius, 2);
// 2. 居中裁剪
fixedImg = cutPicture(fixedImg, radius,radius);
// 3. 把正方形生成圆形
BufferedImage bufferedImage = convertRoundedImage(fixedImg, radius);
return bufferedImage;
}
将头像由方形裁剪为圆形的过程中，会涉及到如下步骤：
- 首先，将原图进行等比例缩减到我们需要的头像半径大小；
- 然后对缩减后的头像进行居中裁剪，因为原图可能不是正方形，当然不一定非要居中裁剪，可根据需要进行相关裁剪，最终裁剪为正方形；
- 再然后将正方形的头像转换为圆形；
- 将头像及昵称合并到背景图上，并指明头像和昵称在背景图上的位置；
/**
* 合并头像和昵称
*
* @param baseImage the base image
* @param topImage the top image
* @return the buffered image
* @throws Exception the exception
*/
public static BufferedImage mergePicture(BufferedImage baseImage, BufferedImage topImage, String nickName) throws IOException {
int width = baseImage.getWidth(null); //底图的宽度
int height = baseImage.getHeight(null); //底图的高度
// 按照底图的宽高生成新的图片
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.createGraphics();
g.drawImage(baseImage, 0, 0, width, height, null);
int smallWidth = topImage.getWidth(null); // 上层图片的宽度
// 设置上层图片放置的位置的坐标及大小
g.drawImage(topImage, (width - smallWidth) / 2, AVATAR_Y, AVATAR_SIZE, AVATAR_SIZE, null);
// 普通字体
Font font = new Font("微软雅黑", Font.PLAIN, 30);
g.setFont(font);
g.setColor(new Color(68,68,68));
FontMetrics fm = g.getFontMetrics(font);
// 昵称长度和放置的位置
int textWidth = fm.stringWidth(nickName);
g.drawString(nickName, (width - textWidth) / 2, FONT_Y);
g.dispose();
return image;
}
在合并头像和昵称的时候，需要我们指定头像在背景图上的坐标，然后字体的话，我们需要确定字体的类型，字体的大小，字体的颜色，字体在背景图上的位置等等。
- 将二维码及二维码识别图片合并到背景图上；
/**
* 合并二维码及二维码识别图
*
* @param baseImage the base image
* @param qrcodeImage the qrcode image
* @param topImage the top image
* @return the buffered image
* @throws IOException
*/
public static BufferedImage mergeQrcode(BufferedImage baseImage, String qrcodeImage, String topImage) throws IOException {
BufferedImage recogBufferImage = ImageIO.read(new File(topImage));
BufferedImage qrcodeBufferImage = ImageIO.read(new File(qrcodeImage));
int width = baseImage.getWidth(null); //底图的宽度
int height = baseImage.getHeight(null); //底图的高度
// 按照底图的宽高生成新的图片
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.createGraphics();
g.drawImage(baseImage, 0, 0, width, height, null);
// 设置上层图片放置的位置的坐标及大小，坐标居中
int topWidth = recogBufferImage.getWidth();
g.drawImage(recogBufferImage, (width - topWidth) /2, RECOGNITION_QRCODE_Y, RECOGNITION_QRCODE_SIZE, RECOGNITION_QRCODE_SIZE, null);
g.drawImage(qrcodeBufferImage, (width - QRCODE_SIZE) /2, QRCODE_Y, QRCODE_SIZE, QRCODE_SIZE, null);
g.dispose();
return image;
}
- 处理结束，生成图片：
ImageIO.write(mergeImage, "jpg", new File("D:\\result.jpg"));
- 最终我们通过测试代码看一下完整流程：
public static void main(String[] args) throws Exception{
// 头像
String avastar = "D://avastar.jpg";
// 二维码
String qrcode = "D://qrcode.jpg";
// 二维码识别图
String point = "D://point.png";
// 背景图片
String background = "D://background.jpg";
// 1. 通过背景图片构建 BufferedImage
BufferedImage zoomPicture = ImageIO.read(new File(background));
// 2. 头像裁剪成圆形
BufferedImage roundedImage = SharedImageUtils.createRoundedImage(avastar, SharedImageUtils.AVATAR_SIZE);
// 3. 合并头像，昵称
BufferedImage mergeImage = SharedImageUtils.mergePicture(zoomPicture, roundedImage, "骑着蜗牛去爬山");
// 4. 合并二维码及二维码识别图
mergeImage = SharedImageUtils.mergeQrcode(mergeImage, qrcode, point);
// 5. 生成分享图
ImageIO.write(mergeImage, "jpg", new File("D:\\result.jpg"));
}
-
最终图片展示效果：
分享图.jpg
- 到这里呢，一张分享图就生成了，在实际操作中，我们生成分享图后，上传至图片服务器，然后返回图片的地址即可。其实上述代码有些许重复，并且可优化的地方，等有时间了再重新优化下，并且由于代码挺多，没有一一贴出来，只贴出了部分主要的代码，如有需要，可留言索取。
三、总结
其实，生成分享图的过程中有许多问题值得考虑：
- 背景图问题，一般情况下背景图的比例都是750 * 1334，如果分享图的背景是可变的，那么就需要考虑等比例缩放，然后再按照该比例裁剪等相关的问题。还有如果背景图可变，还要考虑界面的美观问题了。当然如果背景图是固定的就没这些问题了；
- 字体问题，由于我们本地Windows测试使用的是微软雅黑字体，而线上服务器环境通常是Linux，那么就要考虑线上环境是否支持微软雅黑字体问题。同时还要考虑字体的大小，换行问题；
- 性能问题，因为我们这是本地进行测试，图片都存在于本地，而一旦在其他环境操作，图片的存储通常是图片服务器上，我们需要先把图片读取到服务器，然后一顿操作之后再上传到图片服务器，这是一种挺耗费资源的操作，所以需要考虑下优化相关问题；
- 图片本身问题，需要先了解JPG，PNG，JPEG等图片格式各自的特性，比如JPG的背景透明问题，图片的大小问题等，这些都是需要考虑的问题；
关于字体，这里再简单说一下。我们平时测试使用的字体，服务器上未必有，这时候在图片上与文字相关的内容有可能会出现乱码。而解决方式也无外乎两种：
- 服务器安装字体；
- 将字体文件引入项目中，然后读取字体；
第一种就不说了，第二种方式简单说下，我们可以先查看下我们的系统支持哪些字体：
public static void main(String[] args) {
//获取系统中可用的字体的名称
GraphicsEnvironment e = GraphicsEnvironment.getLocalGraphicsEnvironment();
String[] fontName = e.getAvailableFontFamilyNames();
for (String aFontName : fontName) {
System.out.println(aFontName);
}
}
然后将我们的字体文件引入到项目中，在程序运行的时候进行加载：
public static Font getTempPath(float size) throws IOException {
String userPath = NormalTest.class.getClassLoader().getResource("/weixin/msyh.ttf").getFile();
Font font = null;
try {
// 创建Font对象，并设置字体大小
font = Font.createFont(Font.TRUETYPE_FONT, new File(userPath));
font = font.deriveFont(size);
} catch (FontFormatException e) {
// logger.error();
}
return font;
}
这里，获取系统路径的方式不是唯一的。不过由于字体文件是在程序中加载的，并且由于字体文件的大小都是几M，所以项目在编译的时候会慢一些。
另外，这是后端生成小程序分享图的方式，如果要了解前端如何生成的话，可以参考以下链接：微信小程序之生成图片分享
PS：由于有的时候有点忙，看不到评论，所以不能及时回复，所以把代码放到了git上，有需要的可以自己去拉取下（更新于2018-11-04），地址：https://github.com/zhangwugui/shareImg
网友评论