ImageCombiner设计源码详解

java 自定义海报 Powered by 金山文档 2023-09-04 11:09:43 917人浏览独家记忆

摘要

前言在前面的博客中介绍了一款Java的海报生成器ImageCombiner,原文地址：拿来就用的Java海报生成器ImageCombiner（一），在博文中简单介绍了一下代码以及一个真实的生成案例。但是对源码的介绍不多，本文

前言

在前面的博客中介绍了一款Java的海报生成器ImageCombiner,原文地址：拿来就用的Java海报生成器ImageCombiner（一），在博文中简单介绍了一下代码以及一个真实的生成案例。但是对源码的介绍不多，本文就针对源码进行深入的讲解，便于用户在使用的过程当中可以知其然，知其所以然，了解它的内部架构，程序设计理念，相关类的具体实现，现有的不足，再此基础上可以扩展出符合自己业务的逻辑，进行二次开发改造。

一、源码分析

1、整体设计

ImageCombiner的源码比较简洁，主要包含以下三个包，element 海报组合要素，enums 海报样式、输出格式枚举，painter 具体的绘制器。

包图说明

整体类图

2、绘制器设计

从上面的类图可以清晰得看到，兑现绘制器和绘制工厂共同完成图像、文本、矩形绘制器三种。

图片绘制器与文本绘制器和矩形绘制器不一样的是多了两个make的方法，一个是用于对图片进行高斯模糊处理的方法。高斯模糊的源码如下：

    private BufferedImage makeBlur(BufferedImage srcImage, int radius) {        if (radius < 1) {            return srcImage;        }        int w = srcImage.getWidth();        int h = srcImage.getHeight();        int[] pix = new int[w * h];        srcImage.getRGB(0, 0, w, h, pix, 0, w);        int wm = w - 1;        int hm = h - 1;        int wh = w * h;        int div = radius + radius + 1;        int r[] = new int[wh];        int g[] = new int[wh];        int b[] = new int[wh];        int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;        int vmin[] = new int[Math.max(w, h)];        int divsum = (div + 1) >> 1;        divsum *= divsum;        int dv[] = new int[256 * divsum];        for (i = 0; i < 256 * divsum; i++) {            dv[i] = (i / divsum);        }        yw = yi = 0;        int[][] stack = new int[div][3];        int stackpointer;        int stackstart;        int[] sir;        int rbs;        int r1 = radius + 1;        int routsum, Goutsum, boutsum;        int rinsum, ginsum, binsum;        for (y = 0; y < h; y++) {            rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;            for (i = -radius; i <= radius; i++) {                p = pix[yi + Math.min(wm, Math.max(i, 0))];                sir = stack[i + radius];                sir[0] = (p & 0xff0000) >> 16;                sir[1] = (p & 0x00ff00) >> 8;                sir[2] = (p & 0x0000ff);                rbs = r1 - Math.abs(i);                rsum += sir[0] * rbs;                gsum += sir[1] * rbs;                bsum += sir[2] * rbs;                if (i > 0) {                    rinsum += sir[0];                    ginsum += sir[1];                    binsum += sir[2];                } else {                    routsum += sir[0];                    goutsum += sir[1];                    boutsum += sir[2];                }            }            stackpointer = radius;            for (x = 0; x < w; x++) {                r[yi] = dv[rsum];                g[yi] = dv[gsum];                b[yi] = dv[bsum];                rsum -= routsum;                gsum -= goutsum;                bsum -= boutsum;                stackstart = stackpointer - radius + div;                sir = stack[stackstart % div];                routsum -= sir[0];                goutsum -= sir[1];                boutsum -= sir[2];                if (y == 0) {                    vmin[x] = Math.min(x + radius + 1, wm);                }                p = pix[yw + vmin[x]];                sir[0] = (p & 0xff0000) >> 16;                sir[1] = (p & 0x00ff00) >> 8;                sir[2] = (p & 0x0000ff);                rinsum += sir[0];                ginsum += sir[1];                binsum += sir[2];                rsum += rinsum;                gsum += ginsum;                bsum += binsum;                stackpointer = (stackpointer + 1) % div;                sir = stack[(stackpointer) % div];                routsum += sir[0];                goutsum += sir[1];                boutsum += sir[2];                rinsum -= sir[0];                ginsum -= sir[1];                binsum -= sir[2];                yi++;            }            yw += w;        }        for (x = 0; x < w; x++) {            rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;            yp = -radius * w;            for (i = -radius; i <= radius; i++) {                yi = Math.max(0, yp) + x;                sir = stack[i + radius];                sir[0] = r[yi];                sir[1] = g[yi];                sir[2] = b[yi];                rbs = r1 - Math.abs(i);                rsum += r[yi] * rbs;                gsum += g[yi] * rbs;                bsum += b[yi] * rbs;                if (i > 0) {                    rinsum += sir[0];                    ginsum += sir[1];                    binsum += sir[2];                } else {                    routsum += sir[0];                    goutsum += sir[1];                    boutsum += sir[2];                }                if (i < hm) {                    yp += w;                }            }            yi = x;            stackpointer = radius;            for (y = 0; y < h; y++) {                pix[yi] = (0xff000000 & pix[yi]) | (dv[rsum] << 16) | (dv[gsum] << 8) | dv[bsum];                rsum -= routsum;                gsum -= goutsum;                bsum -= boutsum;                stackstart = stackpointer - radius + div;                sir = stack[stackstart % div];                routsum -= sir[0];                goutsum -= sir[1];                boutsum -= sir[2];                if (x == 0) {                    vmin[y] = Math.min(y + r1, hm) * w;                }                p = x + vmin[y];                sir[0] = r[p];                sir[1] = g[p];                sir[2] = b[p];                rinsum += sir[0];                ginsum += sir[1];                binsum += sir[2];                rsum += rinsum;                gsum += ginsum;                bsum += binsum;                stackpointer = (stackpointer + 1) % div;                sir = stack[stackpointer];                routsum += sir[0];                goutsum += sir[1];                boutsum += sir[2];                rinsum -= sir[0];                ginsum -= sir[1];                binsum -= sir[2];                yi += w;            }        }        srcImage.setRGB(0, 0, w, h, pix, 0, w);        return srcImage;    }

在上述的代码，尤其是绘制器工厂的实现，信心的朋友通过阅读代码可以看到，工厂实现方式还是可以进行改造，由于目前的绘制对象也不多，不是有代码洁癖的也能接受。

package com.freewayso.image.combiner.painter;import com.freewayso.image.combiner.element.CombineElement;import com.freewayso.image.combiner.element.ImageElement;import com.freewayso.image.combiner.element.RectangleElement;import com.freewayso.image.combiner.element.TextElement;public class PainterFactory {    private static ImagePainter imagePainter;               //图片绘制器    private static TextPainter textPainter;                 //文本绘制器    private static RectanglePainter rectanglePainter;       //矩形绘制器    public static IPainter createInstance(CombineElement element) throws Exception {        //考虑到性能，这里用单件，先不lock了        if (element instanceof ImageElement) {            if (imagePainter == null) {                imagePainter = new ImagePainter();            }            return imagePainter;        } else if (element instanceof TextElement) {            if (textPainter == null) {                textPainter = new TextPainter();            }            return textPainter;        } else if (element instanceof RectangleElement) {            if (rectanglePainter == null) {                rectanglePainter = new RectanglePainter();            }            return rectanglePainter;        } else {            throw new Exception("不支持的Painter类型");        }    }}

在上述的代码中，通过if循环来进行具体的绘制图形实例生成，可以想象一下，针对上述的代码，如果未来要扩展一种新的绘制对象，该怎么进行代码优化。

3、海报元素类设计

海报元素可以分为三种元素，与绘制器一一对应，分别是图片元素、文本元素、矩形元素。这几个类都是CombineElement的子类。后面结合时序图来说明具体的元素绑定与注册及绘制过程。

4、海报生成器

ImageCombiner是最重要的海报生成器类，在ImageCombiner中，定义了一个海报元素类的集合用来保存需要在海报中添加的元素。同时定义了很多的以add开头的添加海报元素的方法，用以往List集合中添加新的元素对象。

    public ImageElement addImageElement(String imgUrl, int x, int y, int width, int height, ZoomMode zoomMode) {        ImageElement imageElement = new ImageElement(imgUrl, x, y, width, height, zoomMode);        this.combineElements.add(imageElement);        return imageElement;    }

二、生成时序解析

1、海报组装

public void test1() throws Exception {        try {            String bgImageUrl = "https://img.thebeastshop.com/combine_image/funny_topic/resource/bg_3x4.png";                       //背景图（测试url形式）            String qrCodeUrl = "Http://imgtest.thebeastshop.com/file/combine_image/qrcodef3D132b46b474fe7a9cc6e76a511dfd5.jpg";     //二维码            String productImageUrl = "https://img.thebeastshop.com/combine_image/funny_topic/resource/product_3x4.png";             //商品图            BufferedImage waterMark = ImageIO.read(new URL("https://img.thebeastshop.com/combine_image/funny_topic/resource/water_mark.png"));  //水印图（测试BufferedImage形式）            BufferedImage avatar = ImageIO.read(new URL("https://img.thebeastshop.com/member/privilege/level-icon/level-three.jpg"));           //头像            String title = "# 最爱的家居";           //标题文本            String content = "苏格拉底说：“如果没有那个桌子，可能就没有那个水壶”";  //内容文本            //合成器和背景图（整个图片的宽高和相关计算依赖于背景图，所以背景图的大小是个基准）            ImageCombiner combiner = new ImageCombiner(bgImageUrl, OutputFORMat.PNG);            combiner.setBackgroundBlur(30);     //设置背景高斯模糊（毛玻璃效果）            combiner.setcanvasRoundCorner(100); //设置整图圆角（输出格式必须为PNG）            //商品图（设置坐标、宽高和缩放模式，若按宽度缩放，则高度按比例自动计算）            combiner.addImageElement(productImageUrl, 0, 160, 837, 0, ZoomMode.Width)                    .setRoundCorner(46)     //设置圆角                    .setCenter(true);       //居中绘制，会忽略x坐标参数，改为自动计算            //标题（默认字体为“阿里巴巴普惠体”，也可以自己指定字体名称或Font对象）            combiner.addTextElement(title, 55, 150, 1400);            //内容（设置文本自动换行，需要指定最大宽度（超出则换行）、最大行数（超出则丢弃）、行高）            combiner.addTextElement(content, "微软雅黑", 40, 150, 1480)                    .setAutoBreakLine(837, 2, 60);            //头像（圆角设置一定的大小，可以把头像变成圆的）            combiner.addImageElement(avatar, 200, 1200, 130, 130, ZoomMode.WidthHeight)                    .setRoundCorner(200)                    .setBlur(5);       //高斯模糊，毛玻璃效果            //水印（设置透明度，0.0~1.0）            combiner.addImageElement(waterMark, 630, 1200)                    .setAlpha(.8f)      //透明度，0.0~1.0                    .setRotate(15);     //旋转，0~360，按中心点旋转            //二维码（强制按指定宽度、高度缩放）            combiner.addImageElement(qrCodeUrl, 138, 1707, 186, 186, ZoomMode.WidthHeight);            //元素对象也可以直接new，然后手动加入待绘制列表            TextElement textPrice = new TextElement("￥1290", 40, 600, 1400);            textPrice.setStrikeThrough(true);       //删除线            combiner.addElement(textPrice);         //加入待绘制集合            //动态计算位置            int offsetPrice = textPrice.getX() + textPrice.getWidth() + 10;            combiner.addTextElement("￥999", 60, offsetPrice, 1400)                    .setColor(Color.red);            //执行图片合并            combiner.combine();            //保存文件            combiner.save("d://fullTest.png");            System.out.println(1/0);            System.out.println("end...");            //或者获取流（并上传oss等）            //InputStream is = combiner.getCombinedImageStream();            //String url = ossUtil.upload(is);        } catch (Exception e) {            e.printStackTrace();        }            }

通过以上的时序图可以清晰的看到系统的调用过程，一共包含了24个步骤。通过时序图和代码，相信您可以很直观的看到相关的调用方式，这里不做过多的赘述。

2、combine海报合成

    public BufferedImage combine() throws Exception {        combinedImage = new BufferedImage(canvasWidth, canvasHeight, BufferedImage.TYPE_INT_RGB);        Graphics2D g = combinedImage.createGraphics();        //PNG要做透明度处理，否则背景图透明部分会变黑        if (outputFormat == OutputFormat.PNG) {            combinedImage = g.getDeviceConfiguration().createCompatibleImage(canvasWidth, canvasHeight, Transparency.TRANSLUCENT);            g = combinedImage.createGraphics();        }        //抗锯齿        g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);        g.setColor(Color.white);        //循环绘制各元素        for (CombineElement element : combineElements) {            IPainter painter = PainterFactory.createInstance(element);            if (element.isRepeat()) {                //平铺绘制                painter.drawRepeat(g, element, canvasWidth, canvasHeight);            } else {                //正常绘制                painter.draw(g, element, canvasWidth);            }        }        g.dispose();        //处理整图圆角        if (roundCorner != null) {            combinedImage = this.makeRoundCorner(combinedImage, canvasWidth, canvasHeight, roundCorner);        }        return combinedImage;    }

combine方法是最核心的生成方法，在第6步进入循环，将页面设置的不同的海报元素添加到生成器中，并调用绘制器工程生成相应的绘制器，通过Graphics2D来进行海报的生成。至此，海报生成器的相关类就全部讲解完毕，工具虽小，五脏俱全。

//循环绘制各元素for (CombineElement element : combineElements) {      IPainter painter = PainterFactory.createInstance(element);       if (element.isRepeat()) {            //平铺绘制             painter.drawRepeat(g, element, canvasWidth, canvasHeight);       } else {           //正常绘制            painter.draw(g, element, canvasWidth);       } }