node-canvas：使用自定義字體

我想知道如何使用自定義字體和node-canvas。node-canvas：使用自定義字體

這裏是我的嘗試，但它不工作至今：

var Canvas = require('canvas') 
    , Image = Canvas.Image 
    , Font = Canvas.Font 
    , path = require('path'); 

var gubblebum = new Font('gubblebum', fontFile('GUBBLO___.ttf')); 

function fontFile(name) { 
    return path.join(__dirname, '../fonts', name); 
} 

function draw() { 
    var canvas = new Canvas(100, 100) 
    , ctx = canvas.getContext('2d'); 

    ctx.addFont(gubblebum); 
    ctx.font = 'bold 40 gubblebum'; 
    ctx.fillText('test', 25, 45); 

    return canvas; 
} 

module.exports = draw;

當在瀏覽器中呈現，字體留在默認情況下，以及規模不變。

正確加載字體文件。否則，將拋出異常。

有趣的是，當我做ctx.font ='bold 40 someGibberish';字體大小正確應用。

來源

2015-09-11 Sung Won Cho

現在看來，節點畫布上的字體已損壞，看起來您需要禁用pango，但我仍在試圖弄清楚如何做到這一點併爲模塊重建 – WakeskaterX

所以我最終得到節點畫布以處理自定義字體。

首先我使用了舊版本的開羅。我使用Brew來安裝所有依賴項，因爲它告訴我哪些是我擁有的，哪些是正確鏈接的，然後一旦所有依賴項都正常工作，我從Brew卸載Cairo版本並安裝版本1.12.X（補丁版本18我認爲這是）開羅。這解決了Mac OSX問題與字體大小，但我無法加載字體。

因此，經過一些調查發現，最新的Node Canvas模塊也存在問題，所以我在我的package.json中將版本設置爲1.1.0，最後我得到了自定義字體以正確加載和調整大小。

所以TL; DR：使用開羅版本1.12.X和節點畫布1.1.0，它應該工作，我認爲？我花了一段時間纔得到它的工作。

來源

2015-10-26 01:14:48 WakeskaterX

您可以詳細說明設置這起來了嗎？你是否從源代碼克隆並編譯了Cairo 1.12.X？或者您是否通過brew安裝了舊版本？到目前爲止，我已經從源代碼克隆並構建了1.12.X版本，但試圖運行'npm install canvas'會產生更多的錯誤，即使將PKG_CONFIG_PATH設置爲編譯cairo的src文件夾時也是如此。 –

我不得不通過源代碼找到它。我去抓取tarball並手動安裝，然後用它替換brew版本，然後將其鏈接到正確的所需軟件包。 IIRC。這已經有一段時間了，我從使用node-canvas（因爲這很痛苦）轉換到使用node-gd更好。 – WakeskaterX

這應該在node-canvas 2.0中的「Just Work」（目前在alpha中，但相對穩定）。請參閱新的Canvas.registerFont方法：https://github.com/Automattic/node-canvas/#registerfont-for-bundled-fonts。

來源

2017-09-05 23:27:54 ZachB

node-canvas：使用自定義字體

回答

相關問題