什么是MI

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

MI能做什么

隨著互聯(lián)網(wǎng)業(yè)務(wù)的發(fā)展，用戶接觸的信息也越來越多，越來越豐富。生動(dòng)的圖片相對(duì)簡(jiǎn)單的文字也更能夠吸引用戶的關(guān)注。而互聯(lián)網(wǎng)海量的用戶有不同的屬性和興趣，個(gè)性化展示圖片、分享圖片的場(chǎng)景應(yīng)運(yùn)而生。基于以上原因，Mi（mix-img）誕生了。

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

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

MI的特點(diǎn)

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

安裝和使用

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('圖片合成結(jié)束', res); }

調(diào)試工具

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

# 將代碼clone到本地 git clone # 安裝依賴 npm i # 啟動(dòng)配置調(diào)試工具 npm run tool

3）、工具界面

4）、使用步驟

• 修改 JSON 配置
• 點(diǎn)擊「生成預(yù)覽」按鈕，進(jìn)行預(yù)覽
• 參數(shù)調(diào)試完畢，點(diǎn)擊「復(fù)制配置」按鈕
• 詳細(xì)安裝和使用方法請(qǐng)參見GitHub的README文檔中的快速開始。

未來規(guī)劃

Mi目前完成了pc和移動(dòng)端基于canvas合成圖片的支持，后續(xù)將會(huì)對(duì)微信和百度等小程序支持。

貢獻(xiàn)和反饋

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

文章看完，還不過癮？
更多精彩內(nèi)容歡迎關(guān)注百度開發(fā)者中心公眾號(hào)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。