fontpixels.js

fontpixels.js

この stackoverflow の回答に基づいて、フォント内の文字のピクセル データを取得するための JavaScript ライブラリ。このページのデモをご覧ください。

API

 var pixelarray = fontpixels . generatepixels ( text , resolution , fontFamily , width , lines ) ;

文章

 // supports ascii...
text = "A" ;
// and unicode
text = "╫" ;

文字間の間隔が少しおかしいため、テキストに文字のみを挿入することをお勧めします。

解決

 resolution = 30 ;

解像度は、出力のサイズと出力の詳細の両方を決定します。解像度が高くなると、出力されるピクセル配列も大きくなり、より詳細な情報が得られます。

フォントファミリー

 fontFamily = "Times New Roman" ;

テキストのフォント。 fontpixels.generatepixels()を呼び出す前に、フォントがロードされていることを確認してください。フォントローダーにはWebFontをお勧めします。

幅

 width = 0.3 ;

テキストの線幅。通常は 0 から 1 までの値で十分です。 linesが true に設定されている場合にのみ機能します。 Canvas ctx.lineWidthプロパティに対応します。

行

 lines = false ;

HTML5 の Canvas ctx.strokeText()のように、テキストを線として描画するかどうか。

ピクセル配列

 console . log ( pixelarray ) ;
	//[{x: 2, y: 4}, {x: 5, y: 6} ...]

出力は、ピクセルの (x, y) 値の配列です。ピクセルを反復処理することでピクセルを使用できます。

 pixelarray . forEach ( function ( value ) {
	console . log ( value . x , value . y ) ;
} ) ;