如何將十六進制字符串轉換為base64以在NodeJS中保存圖像

Question

我正在制作一個NodeJS sockets.io多人繪圖畫布。 數據被保存為2D矩陣中的顏色ID，並且我有一個顏色十六進制代碼數組與ID匹配。

我需要能夠將圖像保存為文件，所以我要把圖像數據存儲為連續的字符串，並連接每個像素的十六進制代碼：

// 'boardData' contains the index of the color for each pixel
// 'colors' is an array on hex values

var hexString = ""

for (var x = 0; x < boardWidth; x++) {
    for (var y = 0; y < boardHeight; y++) {
        hexString += colors[boardData[x][y]].replace('#','');
    }
}

結果是類似ffffff3fbae52dffba...

我設法通過執行以下操作將該字符串轉換為base64：

var base64Data = Buffer.from(hexString, 'hex').toString('base64')

然后，我嘗試通過執行以下操作保存它：

fs.writeFile("image.png", base64Data, {encoding: 'base64'}, function(err) {
    if (err) return err;
    console.log('Saved!');
});

但是生成的圖像似乎具有不兼容的格式。

當我嘗試保存16x16的全白圖像時，base64代碼顯示為///////////////////////////... ，但是當我嘗試在線圖像轉換器，將16x16的白色圖像變為iVBORw0KGgoAAAANSUhEUgAAAAg... ，並將其硬編碼為fs.writeFile數據即可。 實際上，即使是1x1的白色圖像也看起來會產生很多字符，因此我不確定該如何工作。

我相信我在這里錯過了一步。 有人可以指出我正確的方向嗎？ 是否有另一種方法可以將該原始顏色數據轉換為圖像文件？

Answer 1

我找到了解決方案。 這個叫做Jimp的庫確實可以滿足我的需求。

對於任何想知道的人。 只需通過打開命令終端，導航到我的nodejs服務器文件夾並運行以下命令來安裝模塊：

npm install --save jimp

然后，在我的服務器代碼上，我必須導入該庫（請注意，它必須是大寫的J）：

var Jimp = require('jimp')

因此，我只是這樣做來保存圖像：

let jimg = new Jimp(boardWidth, boardHeight);
for (var x=0; x<boardWidth; x++) {
    for (var y=0; y<boardHeight; y++) {
        var hex = colors[boardData[x][y]].replace('#','');
        var num = parseInt(hex+"ff", 16);
        jimg.setPixelColor(num, x, y);
    }
}
jimg.write("output.png")

希望這對某人有幫助！