百度开源 mix-img 图片合成工具

最近做的与前端截图、绘制相关的事情比较多，以前写过关于前端截图的文章 前端截长图这件破事。前段时间看到公司开源一个前端工具库 mix-img，今天与大家分享一下。

mix-img 主要解决了前端图片合成问题，比如把 5 张图合成一张，内置了二维码生成。它不像 html2canvas 这么智能，可以直接把 DOM 转换成图片，但是 html2canvas有它致命的缺点：导不出复杂的 DOM。也没有 dom-to-image 这么完美，但是 dom-to-image 有致命的缺点，兼容性问题。

mix-img 采用的方案是你告诉我要的绘制数据，然后根据这些数据使用 canvas 进行绘制，目前只支持图片和文字。输出结果可以是图片的 base64，或者是 canvas。总之，它能够帮你把多张图片、多段文字生成一张图，内置了二维码功能。举个例子（官方 demo）：

绘制的配置文件：

export const mixConfig = {
    'replaceText': {
        'submitName': '朱雀号',
        'userName': '百度网友123',
        'avatarUrl': 'https://efe-h2.cdn.bcebos.com/ceug/resource/res/2020-07/1594717976441/idyexeq1u92w.png',
        'qrCodeUrl': 'https://www.baidu.com'
    },
    'base': {
        'backgroundImg': 'https://efe-h2.cdn.bcebos.com/ceug/resource/res/2020-07/1594797097021/ml9v716tnxoc.jpg',
        'width': 375,
        'height': 667,
        'quality': 0.8,
        'fileType': 'jpeg'
    },
    'qrCode': {
        'width': 74,
        'height': 74,
        'text': '{qrCodeUrl}',
        'x': 279,
        'y': 576,
        'correctLevel': 1
    },
    'dynamic': [
        {
            'type': 2,
            'position': {
                'x': 187,
                'y': 353
            },
            'style': {
                'fontSize': 22,
                'color': '#ffebc0',
                'textAlign': 'center',
                'fontWeight': 'bold'
            },
            'text': '『{submitName}』'
        },
        {
            'type': 1,
            'position': {
                'x': 169,
                'y': 207
            },
            'size': {
                'dWidth': 40,
                'dHeight': 40
            },
            'imgUrl': '{avatarUrl}',
            'isRound': true
        },
        {
            'type': 2,
            'position': {
                'x': 187,
                'y': 268
            },
            'style': {
                'textAlign': 'center',
                'fontSize': 16,
                'color': '#ffebc0',
                'fontWeight': 'normal'
            },
            'text': '{userName}'
        }
    ]
};

使用：

import {mixImg} from 'mix-img';
import {mixConfig} from './mixConfig';  // 配置文件路径自定义
async function getImg() {
    const res = await mixImg(mixConfig);
    console.log('图片合成结束', res);
}

最终可以生产一张图（来自于官方）：

使用过程不重要，重要的是看看它内部的实现。该库实现代码比较少，代码比较规范，读起来不错。

我看了下源码，内部其实就是使用了 canvas 绘制文字和图片，有几个知识点，如果感兴趣可以看一下：

1、关于 canvas 绘制文本时，如何处理自定义字体；

2、canvas 如何绘制图片，图片如何设置圆角；

3、canvas 如何绘制文本；

总之，该库适合简单的页面绘制，做分享使用。大家加油！

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/