666！百度开源的前端图片合成工具库

大家好，我是「前端实验室」爱分享的了不起~

今天了不起翻到一个比较好玩的前端图片合成工具库：Mi。

Mi 简介

Mi 全称 mix-img，是一个前端图片合成工具库。

Mi通过调用 canvas API 实现图片和文字的合成，并最终生成图片 base64，合成成功后向用户展示和分享。它可以将多张图片和文字合成一张全新的图片。

作为一个轻量级的图片合成解决方案，Mi 支持多张图片并行加载合成，减少图片合成时间，提升前端开发者的开发效率，改善开发体验。

安装和使用

直接使用 npm 安装依赖。

代码语言：javascript复制

npm install --save mix-img

接着在项目中引入mix-img模块即可使用。

代码语言：javascript复制

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

我们开发者关注的重点在于 mixConfig.js 文件。图片如何合成靠的就是这个配置。

参数配置

图片合成的配置项包含 base（基本配置）、replaceText（替换字段配置）、qrCode（二维码配置）、dynamic（动态元素配置）四大项。

代码语言：javascript复制

export const mixConfig = {

    'replaceText': {
        'submitName': '朱雀号abc123',
        'userName': '百度网友abc123',
        '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',
        'loadingTimeout': 3000,
        'dataType': 'base64'
    },
    'qrCode': {
        'width': 74,
        'height': 74,
        'text': '{qrCodeUrl}',
        'x': 279,
        'y': 576,
        'correctLevel': 1
    },
    'dynamic': [
        {
            'type': 2,
            'position': {
                'x': 187,
                'y': 353
            },
            'style': {
                'fontSize': 20,
                'color': '#ffebc0',
                'textAlign': 'center',
                'fontWeight': 'bold',
                'fontFamily': 'myFont'
            },
            'text': '『{submitName}』'
        },
        ...
    ]
};

export const base64Config = Object.assign({}, JSON.parse(JSON.stringify(mixConfig)));
export const canvasConfig = Object.assign({}, JSON.parse(JSON.stringify(mixConfig)));
canvasConfig.base.dataType = 'canvas';

其中动态元素配置(dynamic部分)更是会有很多的情况，调试配置参数很困难。

好在，mix-img内置了参数调试工具。用户可以在平台内更改参数，预览合成图片效果。调试完毕后，复制最终配置到项目中使用。

内置调试工具开启方式如下：

代码语言：javascript复制

# 将代码clone到本地
git clone https://github.com/baidu/mix-img.git
# 安装依赖
npm i
# 启动配置调试工具
npm run tool

Mi能做什么

Mi 的使用配置流程这么复杂，究竟能用来干点啥呢？貌似离我们挺远的。

其实不然！比如你正在做一个海报制作的工具，又如需要个性化生成图片... 这些都是适应信息多元化展示需要使用到的场景。

只是，我们的企业级开发中场景相对较少~