Skia Canvas: Node向けHTML Canvas描画APIのブラウザーレス実装

 (skia-canvas.org)
4 ポイント 投稿者 GN⁺ 2024-12-04 | 1件のコメント | WhatsAppで共有

紹介

  • Skia Canvasは、Node.jsでHTML Canvas描画APIをブラウザなしで実装したライブラリ。
  • GoogleのSkiaグラフィックスエンジンを基盤としており、Chromeの<canvas>要素に近い結果を生成する。
  • デスクトップやサーバーでハードウェアアクセラレーションによるグラフィックスをレンダリングしたり、多様な画像フォーマットを出力したりする用途に適している。

主な機能

  • GPUでレンダリングが行われるため高速かつコンパクトで、RustとC++で書かれたネイティブコードが処理を担う。
  • OSネイティブのグラフィックスパイプラインを使ってウィンドウにレンダリングでき、ブラウザに似たUIイベントフレームワークを提供する。
  • ラスター（JPEG, PNG, WEBP）およびベクター（PDF, SVG）形式で画像を生成できる。
  • 画像をファイルとして保存したり、バッファとして返したり、dataURL文字列にエンコードしたりできる。
  • 非同期レンダリングやファイルI/Oのために、ユーザー設定可能なワーカープール上でネイティブスレッドを使用する。
  • 1つのキャンバス上で複数の「ページ」を生成し、それを単一のマルチページPDF、または複数ファイルとして保存される画像シーケンスとして出力できる。
  • 効率的なブール演算や点対点補間を用いて、ベジェパスの単純化、オフセット、結合、抽出、分解を行える。
  • スケーリング、回転、変形に加えて、3D遠近変換も提供する。
  • ビットマップベースのパターンだけでなく、ベクターベースのテクスチャで図形を塗りつぶせるほか、ユーザー定義マーカーで線を描ける。
  • CSSフィルターの画像処理演算子を完全にサポートする。
  • 複数行、単語折り返しテキスト、行ごとのテキストメトリクス、スモールキャップス、合字、その他のOpenType機能を含む、豊富なタイポグラフィ制御を提供する。
  • システム外のフォントをローカルファイルから読み込んで使用できる。

使用例

画像ファイルの生成

  • Canvasを使って400x400サイズのキャンバスを作成し、2Dコンテキストを取得する。
  • createConicGradientを使って色のグラデーションを追加し、長方形を描く例を示す。
  • 非同期関数renderを通じて、画像を保存したり、バッファに変換したり、文字列として埋め込んだりする方法を説明する。

マルチページシーケンス

  • 複数色のページを作成し、それをマルチページPDFとして保存する方法、または個別の画像ファイルとして保存する方法を説明する。

ウィンドウへのレンダリング

  • Windowを使って300x300サイズのウィンドウを作成し、drawイベントを通じて円を描く方法を説明する.

関連記事

1件のコメント

 
GN⁺ 2024-12-04
Hacker Newsの意見

  • https://windowjs.org は、Skia をラップして Canvas API として公開し、v8 を組み込んだ小さなランタイムを提供するプロジェクト

    • 3年前に初めてオープンソースとして公開されたプロジェクト
    • WebGL やオーディオなども公開し、デスクトップ上で JavaScript ベースのゲーム向けプラットフォームにする計画があった
    • 他のプロジェクトや生活の変化で開発は中断されたが、Canvas をブラウザ外でも使えるようにするこのプロジェクトを見られてうれしい

  • Node と互換性のある Canvas 実装に興味があるなら、次のものも参考になる

    • canvaskit-wasm は Skia プロジェクトが提供しており、GPU アクセラレーションはサポートしていないようだ
    • @napi-rs/canvas は最速のバインディングを提供する
    • node-canvas は Skia ではなく Cairo を使っている

  • こうしたライブラリの用途が気になる

    • デスクトップではもっと良いネイティブライブラリがあるのでは、という意見がある

  • Skia は Node をサポートする WASM ビルドの CanvasKit を提供しており、このモジュールは Rust バインディング

    • それぞれのアプローチの長所と短所に関心がある

  • Rust crate のラッパーに似たものなのか、という質問がある

  • Node/Web 向けに似たものを作ったことがあり、完璧ではないが良い

    • SDL を使って OS 上にウィンドウを作成できる
    • ドキュメントとサンプルを確認できる

  • 以前の試みでは Node-Gyp のインストールが必要で大変だった

    • このプロジェクトを長い間待っていた

  • 単なるレンダリング API 以上のもの

    • OS ネイティブのグラフィックスパイプラインを使ってウィンドウにレンダリングでき、ブラウザに似た UI イベントフレームワークも提供する
    • WebGPU サポートのために wgpu を追加し、WebGL サポートのために ANGLE を追加できる

  • https://malmal.io で、サーバーで描画されたタイルのレンダリングに使っており、非常にうまく動作している

  • MapLibre のサーバーサイドレンダリングに役立つか気になる

    • 地図のサムネイルを提供するために