开源项目 mix-img 使用教程

开源项目 mix-img 使用教程

mix-imgA fast mix image javascript tool libary项目地址:https://gitcode.com/gh_mirrors/mi/mix-img

1. 项目的目录结构及介绍

mix-img 项目的目录结构如下：

mix-img/
├── docs/
│   └── mixImg.md
├── scripts/
├── src/
├── test/
├── toolkit/
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .stylelintrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── babel.config.js
├── ci.yml
├── jest.config.js
├── package-lock.json
├── package.json

目录介绍

• docs/: 包含项目的文档文件。
• scripts/: 包含项目的脚本文件。
• src/: 包含项目的主要源代码。
• test/: 包含项目的测试代码。
• toolkit/: 包含项目的工具集。
• .editorconfig: 编辑器配置文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .stylelintrc: Stylelint 配置文件。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• babel.config.js: Babel 配置文件。
• ci.yml: 持续集成配置文件。
• jest.config.js: Jest 测试配置文件。
• package-lock.json: npm 依赖锁定文件。
• package.json: npm 项目配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的 scripts 部分。以下是一些关键的启动命令：

{
  "scripts": {
    "start": "npm run tool",
    "tool": "node scripts/start-tool.js"
  }
}

启动命令介绍

• npm start: 启动配置调试工具。
• npm run tool: 运行配置调试工具。

3. 项目的配置文件介绍

项目的配置文件主要是 mixConfig，它包含了图片合成的各项配置。以下是一个示例配置：

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": 353
      },
      "style": {
        "fontSize": 22,
        "color": "#ffebc0",
        "textAlign": "center",
        "fontWeight": "bold"
      },
      "text": "『[

mix-imgA fast mix image javascript tool libary项目地址:https://gitcode.com/gh_mirrors/mi/mix-img