什麼是 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
文章看完，還不過癮？
更多精彩內容歡迎關注百度開發者中心公衆號
