深入了解node-canvas

一、NodeCanvas暫停

NodeCanvas是一個基於node.js的canvas庫，可以使用JavaScript生成圖形，支持多種繪圖操作，像素操作，圖像濾鏡，字體處理，圖像剪裁，圖像合成，PDF輸出等等功能。NodeCanvas提供了一種靈活的方式將canvas應用於伺服器端。

然而，由於NodeCanvas是一個基於C++實現的插件，會存在部分API產生內存泄漏等問題。目前，NodeCanvas已經停止繼續開發了。但是，有些互聯網公司出於自身業務問題，仍在使用NodeCanvas。 而開發者們仍可以自行按照NodeCanvas實現原理，學習學習底層實現的方法。

二、NodeCanvasAPI

NodeCanvas提供了一套基本的API來操作canvas。這些API大部分類 態都是直接使用純JavaScript調用，極其靈活。如果你曾經使用過前端 HTML5中的canvas，那麼使用NodeCanvas去寫伺服器端 繪圖代碼將會變得非常簡單。

以下是一些NodeCanvas常用的API：

// 創建一個新的canvas對象
const { createCanvas } = require('canvas');
const canvas = createCanvas(200, 200);

// 通過繪製矩形來填充一個區域的顏色
const ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 100, 200);

// 向canvas中渲染text
ctx.font = '30px Impact';
ctx.rotate(0.1);
ctx.fillText('Hello World!', 50, 100);

// 創建一個png編碼的Buffer，將圖像寫入到文件中的方法
const fs = require('fs');
const out = fs.createWriteStream(__dirname + '/text.png');
const stream = canvas.createPNGStream();
stream.pipe(out);
out.on('finish', () => console.log('The PNG file was created.'));

三、NodeCanvas實戰案例

1. 生成二維碼圖片

使用NodeCanvas，可以很容易地生成二維碼圖片。

const { createCanvas } = require('canvas');
const QRCode = require('qrcode');
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');

QRCode.toCanvas(canvas, 'https://www.example.com', (error) => {
  if (error) {
    console.error(error)
    return
  }
  console.log('success!');
});

console.log('');

2. 智能圖像識別

使用NodeCanvas可以使用機器學習 AI技術，幫助我們實現智能圖像識別功能。下面通過一個實例代碼來了解這個過程：

// 使用tensorflow.js庫來對圖像進行classification
const sharp = require('sharp');
const tf = require('@tensorflow/tfjs');
const { createCanvas, Image } = require('canvas');

// 將圖像載入到一個ImageData對象中
sharp('image.jpg')
  .resize(224, 224)
  .toBuffer()
  .then(data => {
    const img = new Image();
    img.onload = async () => {
      // 將圖像轉換為Tensor並進行預測
      const tensor = tf.browser.fromPixels(img).expandDims();
      const predictions = await model.predict(tensor).data();

      // 按照順序選擇最大預測概率
      const classes = ['cat', 'dog', 'bird'];
      const res = Array.from(predictions)
                       .map((p, i) => ({ probability: p, className: classes[i] }))
                       .sort((a, b) => b.probability - a.probability)
                       .slice(0, 2);
      console.log(res); // 輸出最大概率的兩個類別
    };
    img.onerror = err => { throw err; };
    img.src = data;
  });

3. 手寫數字識別

// 使用TensorFlow.js進行手寫數字識別
const fs = require('fs');
const { createCanvas, Image } = require('canvas');
const tf = require('@tensorflow/tfjs');

(async () => {
  const model = await tf.loadLayersModel('file://path/to/model.json');
  const canvas = createCanvas(28, 28);
  const input = tf.browser.fromPixels(canvas).reshape([784]);

  // 繪製手寫數字
  const ctx = canvas.getContext('2d');
  ctx.strokeStyle = '#fff';
  ctx.lineWidth = 3;
  ctx.strokeRect(0, 0, 28, 28);
  ctx.lineWidth = 1;

  const _onmousedown = (e) => {
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
    canvas.addEventListener('mousemove', _onmousemove);
  };

  const _onmousemove = (e) => {
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  };

  const _onmouseup = (e) => {
    canvas.removeEventListener('mousemove', _onmousemove);

    // 將手寫數字轉換為Tensor並進行預測
    const input = tf.browser.fromPixels(canvas).reshape([784]);
    const output = model.predict(input.expandDims(0));
    const prediction = Array.from(await output.data());
    console.log(prediction.indexOf(Math.max(...prediction))); // 輸出預測結果
  };

  canvas.addEventListener('mousedown', _onmousedown);
  canvas.addEventListener('mouseup', _onmouseup);
})();

總結

NodeCanvas雖然已經停息維護，但是，對於有其他業務需求的開發者來說，使用NodeCanvas仍是一個不錯的選擇。只要我們按照其API進行操作，就可以輕鬆地實現伺服器端的圖像處理，甚至是AI其他相關功能。