什么是MI

Mi全稱mix-img,是一個前端圖片合成工具庫，它可以將多張圖片和文字合成一個全新的圖片。作為一個輕量級的圖片合成解決方案，Mi支持多張圖片并行加載合成，減少圖片合成時間，提升前端開發者的開發效率，改善開發體驗。

MI能做什么

隨著互聯網業務的發展，用戶接觸的信息也越來越多，越來越豐富。生動的圖片相對簡單的文字也更能夠吸引用戶的關注。而互聯網海量的用戶有不同的屬性和興趣，個性化展示圖片、分享圖片的場景應運而生。基于以上原因，Mi（mix-img）誕生了。

Mi的核心價值在于能夠通過簡單的配置輸入將多張圖片或者文字快速的合并成一張圖片展示給用戶或者用于分享炫耀場景。

Mi在圖片和文字的樣式處理上也足夠完善，包括支持產出不同尺寸、不同類型的圖片，圖片的圓角處理。還有對文字顏色、位置的處理。同時也支持在圖片中加入二維碼的元素。

MI的特點

• 并行加載圖片資源使合成速度更快
• 內置二維碼功能，直接配置就能將二維碼合成到圖片上，不用開發者單獨處理
• 支持圖片壓縮
• 默認增加緩存處理，同樣配置圖片直接返回結果而不是重新合成
• 對開發者友好，包括支持調試、文字變量替換等

安裝和使用

1）、安裝

npm install --save mix-img;

2）、使用

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

調試工具

1）、產生背景
圖片合成的配置項包含 base（基本配置）、replaceText（替換字段配置）、qrCode（二維碼配置）、dynamic（動態元素配置）四大項。其中動態元素配置更是會有很多的情況，調試配置參數很困難。為了減少開發人員工作量，內置了參數調試工具。用戶可以在平臺內更改參數，預覽合成圖片效果。調試完畢后，復制最終配置到項目中使用。
2）、如何啟動

# 將代碼clone到本地 git clone # 安裝依賴 npm i # 啟動配置調試工具 npm run tool

3）、工具界面

4）、使用步驟

• 修改 JSON 配置
• 點擊「生成預覽」按鈕，進行預覽
• 參數調試完畢，點擊「復制配置」按鈕
• 詳細安裝和使用方法請參見GitHub的README文檔中的快速開始。

未來規劃

Mi目前完成了pc和移動端基于canvas合成圖片的支持，后續將會對微信和百度等小程序支持。

貢獻和反饋

1)、項目開源地址
【Github地址】：
https://github.com/baidu/mix-img
【Gitee地址】：
https://gitee.com/baidu/mix-img

文章看完，還不過癮？
更多精彩內容歡迎關注百度開發者中心公眾號

總結

以上是生活随笔為你收集整理的百度一款前端图片合成工具库MI开源啦！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。