开源项目 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