Una biblioteca de JavaScript para obtener los datos de píxeles de un carácter en una fuente basada en esta respuesta de stackoverflow. Consulte esta página para ver una demostración.
var pixelarray = fontpixels . generatepixels ( text , resolution , fontFamily , width , lines ) ;
// supports ascii...
text = "A" ;
// and unicode
text = "╫" ;
Se recomienda insertar sólo un carácter para el texto porque el espacio entre letras es un poco extraño.
resolution = 30 ;
La resolución determina tanto el tamaño de la salida como el detalle de la misma. Las resoluciones más grandes generan matrices de píxeles más grandes y más detalles.
fontFamily = "Times New Roman" ;
Fuente del texto. Asegúrese de que la fuente esté cargada antes de llamar a fontpixels.generatepixels()
. Recomendaría WebFont como cargador de fuentes.
width = 0.3 ;
Ancho de línea del texto. Los valores entre 0 y 1 suelen ser suficientes. Sólo funciona cuando lines
están configuradas como verdaderas. Corresponde a la propiedad canvas ctx.lineWidth
.
lines = false ;
Ya sea para dibujar el texto como líneas, como el lienzo HTML5 ctx.strokeText()
.
console . log ( pixelarray ) ;
//[{x: 2, y: 4}, {x: 5, y: 6} ...]
La salida es una matriz de valores (x, y) de los píxeles. Puede utilizar los píxeles iterando sobre ellos.
pixelarray . forEach ( function ( value ) {
console . log ( value . x , value . y ) ;
} ) ;