前言

在頭條發布文章時，需要為文章配置一個封面圖片。我的常規做法就是網上搜一張圖片，然后利用 Photoshop，在圖片上加入文章標題，然后導出生成圖片，如下圖所示：

上圖實際就是在一張背景圖中，加入了一行文字。操作步驟簡單，但是每次都需要打開PhotoShop修改文字，感覺麻煩、工作重復。

能不能用代碼，解決日常生活中遇到的重復性工作呢？

實現方案

整體思路：

文字和圖形不能直接合并，需要將文字先轉換成圖形，然后再將圖形進行合并，大致步驟如下：

利用text-to-svg，將文字轉成SVG圖形；
利用sharp，將SVG圖形與背景圖片合并；

分析實現：

1. 將文字轉為SVG圖形

將文字轉換為SVG圖形，需要借助Node的模塊text-to-png，該模塊能夠將文字按照指定字體生成SVG圖形。

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），放縮時不損失圖形質量，SVG 是使用 XML 格式定義的圖像，如下所示：

在html頁面中嵌入了一個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很好的充當了中間變量的角色，言歸正傳，看下代碼如何實現轉換：

let path = require('path');
let TextToSVG = require('text-to-svg');

let fontPath = path.join(__dirname, './fonts/msyhbd.ttf');//字體可以下載或者從本機系統內copy
let textToSVG = TextToSVG.loadSync(fontPath); // 加載字體文件

let options = {
    x: 0,         //文本開頭的水平位置（默認值：0）
    y: 0,         // 文本的基線的垂直位置（默認值：0）
    fontSize: 36, // 字體大小
    anchor: 'top', // 坐標中的對象錨點
    // letterSpacing: "",  // 設置字母的間距
    attributes: {
        fill: '#FFFFFF' // 文字顏色
    }
}
let textSVG = textToSVG.getSVG('【前端名獅】', options);
console.log(textSVG);

輸出結果：

<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庫來實現的，性能是最高的，所以我采用了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庫注意事項

因為libvips是基于c++實現的，所以sharp庫需要基于C++源代碼進行編譯構建后才能使用。node-gyp是為node編譯C++擴展的時候使用的編譯工具，但是node-gyp依賴Python和VC++構建工具來進行編譯。所以需要先安裝python 和 VC++ 環境。最簡單的方式就是順序執行下面安裝命令：

// 安裝構建環境python、vc++
npm install --global --production windows-build-tools

// 安裝node-gyp 編譯工具
npm install --global node-gyp

// 安裝sharp
npm install sharp