キャンバスをデータURLに印刷する方法

データURLブラウザが提供する便利な機能です。

ファイルシステムファイルを参照する代わりに、次のような画像を作成できます。

<img src="image.png" />

次のように、HTML自体に画像を埋め込みます。

<img src="data:image/png;base64,iVBORw0KGgoAA…" />

どこゴミ一見ランダムな文字と数字で構成されている部分は非常に長いです。

私は遊んでいましたCanvas API動的に画像を生成するために、私はつまずいたtoDataURL()Canvasオブジェクトのメソッド:

canvas.toDataURL()

これは、サーバー側の画像を作成し、サーバー側で生成されたWebページで提供する場合に特に便利だと思います。

すべてNode.jsプロセスから。

特に、キャンバスnpmパッケージキャンバスを初期化できます。

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

たとえばを使用して、それに引き込みますctx.fillText('Hello, World!', 50, 100)その後、canvas.toDataURL()画像のデータURLを生成し、次のように文字列でHTMLに追加できます。

const imageHTML = '<img src="' + canvas.toDataURL() + '" />'

もちろん、フロントエンドでも同じことができますが、canvasオブジェクトはへの参照です<canvas>描画先のHTML要素:

const canvas = document.getElementById('canvas')
//…
const imageHTML = '<img src="' + canvas.toDataURL() + '" />'

私の無料ダウンロードNode.jsハンドブック


その他のノードチュートリアル: