百度一款前端圖片合成工具庫 MI 開源啦！

什麼是 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

 

文章看完，還不過癮？

更多精彩內容歡迎關注百度開發者中心公衆號