作者：訣九 前端名獅
轉(zhuǎn)發(fā)鏈接：
https://mp.weixin.qq.com/s/BMg8bFUwa4gmm6v2acAe7Q
前言
在頭條發(fā)布文章時(shí)，需要為文章配置一個(gè)封面圖片。我的常規(guī)做法就是網(wǎng)上搜一張圖片，然后利用 Photoshop，在圖片上加入文章標(biāo)題，然后導(dǎo)出生成圖片，如下圖所示：
上圖實(shí)際就是在一張背景圖中，加入了一行文字。操作步驟簡單，但是每次都需要打開PhotoShop修改文字，感覺麻煩、工作重復(fù)。
能不能用代碼，解決日常生活中遇到的重復(fù)性工作呢？
實(shí)現(xiàn)方案
整體思路：
文字和圖形不能直接合并，需要將文字先轉(zhuǎn)換成圖形，然后再將圖形進(jìn)行合并，大致步驟如下：
- 利用text-to-svg，將文字轉(zhuǎn)成SVG圖形；
- 利用sharp，將SVG圖形與背景圖片合并；
分析實(shí)現(xiàn)：
1. 將文字轉(zhuǎn)為SVG圖形
將文字轉(zhuǎn)換為SVG圖形，需要借助Node的模塊text-to-png，該模塊能夠?qū)⑽淖职凑罩付ㄗ煮w生成SVG圖形。
SVG 意為可縮放矢量圖形（Scalable Vector Graphics），放縮時(shí)不損失圖形質(zhì)量，SVG 是使用 XML 格式定義的圖像，如下所示：
在html頁面中嵌入了一個(gè)SVG表示三角形
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
</body>
</html>
展示效果：
SVG很好的充當(dāng)了中間變量的角色，言歸正傳，看下代碼如何實(shí)現(xiàn)轉(zhuǎn)換：
let path = require('path');
let TextToSVG = require('text-to-svg');
let fontPath = path.join(__dirname, './fonts/msyhbd.ttf');//字體可以下載或者從本機(jī)系統(tǒng)內(nèi)copy
let textToSVG = TextToSVG.loadSync(fontPath); // 加載字體文件
let options = {
x: 0, //文本開頭的水平位置（默認(rèn)值：0）
y: 0, // 文本的基線的垂直位置（默認(rèn)值：0）
fontSize: 36, // 字體大小
anchor: 'top', // 坐標(biāo)中的對象錨點(diǎn)
// letterSpacing: "", // 設(shè)置字母的間距
attributes: {
fill: '#FFFFFF' // 文字顏色
}
}
let textSVG = textToSVG.getSVG('【前端名獅】', options);
console.log(textSVG);
輸出結(jié)果：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="47.513671875"><path fill="#FFFFFF"
d="M23.94 7.95L23.94 7.95L29.67 9.39Q28.65 10.65 27.54 11.92L27.54 11.92L35.40 11.92L35.40 16.07L0.56 16.07L0.56 11.92L8.03 11.92Q7.24 10.63 6.40 9.39L6.40 9.39L11.67 7.95Q13.03 9.98 14.22 11.92L14.22 11.92L21.36 11.92Q22.71 9.95 23.94 7.95ZM28.72 35.51L28.72 17.58L33.47 17.58L33.47 37.02Q33.47 39.39 32.43 40.71Q31.39 42.03 29.53 42.28Q27.67 42.54 22.85 42.54L22.85 42.54Q22.54 40.50 21.83 37.58L21.83 37.58Q25.03 37.72 26.68 37.72L26.68 37.72Q28.72 37.72 28.72 35.51L28.72 35.51ZM7.35 34.95L7.35 42.50L2.57 42.50L2.57 18L19.27 18L19.27 37.51Q19.27 39.80 18.21 41.01Q17.16 42.22 15.22 42.37Q13.29 42.52 10.58 42.54L10.58 42.54Q10.02 39.52 9.60 37.86L9.60 37.86Q12.27 38.00 12.76 38.00L12.76 38.00Q14.48 38.00 14.48 36.07L14.48 36.07L14.48 34.95L7.35 34.95ZM14.48 24.82L14.48 22.29L7.35 22.29L7.35 24.82L14.48 24.82ZM7.35 28.62L7.35 31.15L14.48 31.15L14.48 28.62L7.35 28.62ZM21.76 35.33L21.76 18.60L26.16 18.60L26.16 35.33L21.76 35.33ZM69.33 18.18L50.13 18.18L50.13 10.16L54.21 10.16L54.21 14.10L57.45 14.10L57.45 7.95L61.98 7.95L61.98 14.10L65.25 14.10L65.25 10.16L69.33 10.16L69.33 18.18ZM36.88 18.67L36.88 14.24L41.12 14.24Q39.96 11.44 39.02 9.63L39.02 9.63L43.17 7.98Q44.12 9.70 45.74 12.94L45.74 12.94L42.52 14.24L48.52 14.24L48.52 18.67L36.88 18.67ZM44.09 19.41L44.09 19.41L48.34 19.93L45.93 34.00L48.34 33.57Q48.20 34.70 48.02 38.00L48.02 38.00Q43.10 38.85 37.27 40.11L37.27 40.11L36.49 35.51L42.28 34.59Q43.28 27.35 44.09 19.41ZM36.91 20.18L40.71 19.55L42.54 32.27L38.64 32.94Q37.93 26.40 36.91 20.18L36.91 20.18ZM48.87 24.33L48.87 20.18L70.73 20.18L70.73 24.33L61.24 24.33L60.68 26.54L70.24 26.54L70.24 39.90Q70.24 41.75 69.06 42.29Q67.89 42.84 66.29 42.84L66.29 42.84Q65.13 42.84 63.95 42.64L63.95 42.64L63.72 40.89L60.64 40.89L60.64 30.69L58.64 30.69L58.64 40.89L55.20
40.89L55.20 30.69L53.19 30.69L53.19 42.64L49.04 42.64L49.04 26.54L56.30 26.54L56.76 24.33L48.87 24.33ZM66.09 37.97L66.09 30.69L64.09 30.69L64.09 38.74Q65.07 38.85 65.34 38.85L65.34 38.85Q66.13 38.85 66.09 37.97L66.09 37.97Z"/></svg>
2. 合并圖形
用于合并圖片的庫有很多，比如gm、jimp、mapnik、sharp等，其中sharp是基于libvips庫來實(shí)現(xiàn)的，性能是最高的，所以我采用了sharp來合并圖形。
let textSVG = Buffer.from(textSVG);
let bgPath = path.join(__dirname, './img/bg.jpg');
let targetPath = path.join(__dirname, '../dist/bg.jpg');
sharp(bgPath).composite([{
input: textSVG,
gravity: 'center'
}]).toFile(targetPath);
sharp庫注意事項(xiàng)
- 因?yàn)閘ibvips是基于c++實(shí)現(xiàn)的，所以sharp庫需要基于C++源代碼進(jìn)行編譯構(gòu)建后才能使用。node-gyp是為node編譯C++擴(kuò)展的時(shí)候使用的編譯工具，但是node-gyp依賴Python和VC++構(gòu)建工具來進(jìn)行編譯。所以需要先安裝python 和 VC++ 環(huán)境。最簡單的方式就是順序執(zhí)行下面安裝命令：
// 安裝構(gòu)建環(huán)境python、vc++
npm install --global --production windows-build-tools
// 安裝node-gyp 編譯工具
npm install --global node-gyp
// 安裝sharp
npm install sharp
- 官方文檔中，用sharp合并圖像時(shí)，給出的api是 overlayWith，但是你會(huì)發(fā)現(xiàn)，這個(gè)api并不存在。這個(gè)是因?yàn)閟harp最新版本0.23.3刪除了overlayWith，用composite進(jìn)行了替換。
至此，我們就實(shí)現(xiàn)了一個(gè)簡單的生成公眾號封面圖片的功能，讓我們看看生成效果：
總結(jié)
程序可以幫助我們干重復(fù)的事情，提高我們的生產(chǎn)力，如果程序員寫的代碼都用于解決自己生活中遇到的問題，對程序員無疑是巨大的動(dòng)力源泉。
