получить пиксели холста после того, как fillText вернет 0

Question

получить пиксели холста после того, как fillText вернет 0

1

Я пытался получить плотность пикселей любого символа, используя холст HTML5 с javascript, но контекст getImageData всегда возвращает массив, который, кажется, является черным прямоугольником (RGB = [0,0,0] всегда).

Может ли кто-нибудь сказать мне, что я делаю неправильно?

var dcanvas = document.getElementById('char-canvas'),
  dcontext = dcanvas.getContext('2d');

function fontDensity(c) {
  dcanvas.height = 30;
  dcanvas.width = 30;
  dcontext.clearRect(0, 0, dcanvas.width, dcanvas.height);
  dcontext.font = "15px monospace";
  dcontext.fillStyle = "black";
  dcontext.textAlign = "center";
  dcontext.textBaseline = "middle";
  dcontext.fillText(c, dcanvas.width / 2, dcanvas.height / 2);
  var imgd = dcontext.getImageData(0, 0, dcanvas.width, dcanvas.height),
    pix = imgd.data,
    density = 0;
  // Read canvas pixels RGBA!
  for (var i = 0, n = pix.length; i < n; i += 4) {
    density += (pix[i] + pix[i + 1] + pix[i + 2]) / 3;
  }
  //density /= pix.length;
  return density;
}

console.log(fontDensity("a"));

canvas {
  border: 1px solid #000;
  display: block;
  margin: 20px auto;
}

<canvas id="char-canvas" width="30" height="30"></canvas>

Nereo Costacurta 02 сен. 2017, в 20:47

Источник

Теги:

javascript

html5

canvas

fonts

2 ответа

1

Забавный черный обратный ноль в RGB 0 черный. Нет необходимости в setTimeout.

//Globals

density = 0;
dcanvas = null;
dcontext = null;
imgd = null;
pix = null;

//make calculation
function GET () {
  
  for (var i = 0, n = pix.length; i < n; i += 4) {
    density += (pix[i] + pix[i + 1] + pix[i + 2]) / 3;
  }
  console.log(density)
  
}



function fontDensity(c) {
  dcanvas.height = 30;
  dcanvas.width = 30;
  dcontext.clearRect(0, 0, dcanvas.width, dcanvas.height);
  dcontext.font = "15px monospace";
  dcontext.fillStyle = "#100000";
  dcontext.textAlign = "center";
  dcontext.textBaseline = "middle";
  dcontext.fillText(c, dcanvas.width / 2, dcanvas.height / 2);
//dcontext.fillRect(0,0, dcanvas.width , dcanvas.height); 
  imgd = dcontext.getImageData(0, 0, dcanvas.width , dcanvas.height );
  pix = imgd.data; 
  GET ()
  
}

window.onload = function(){

dcanvas = document.getElementById('char-canvas');
dcontext = dcanvas.getContext('2d');

  fontDensity("a")

 
};

canvas {
  border: 1px solid #000;
  display: block;
  margin: 0px auto;
}

<canvas id="char-canvas" width="30" height="30"></canvas>

Nikola Lukic 02 сен. 2017, в 16:03

0

спасибо за подсказки!
Nereo Costacurta 02 сен. 2017, в 20:55

Ещё вопросы

user1693593 · Accepted Answer · 2017-09-02T16-26-00.000Z

Значение пикселя по умолчанию является черным, поэтому вы всегда будете иметь RGB, возвращающий 0, когда цвет черный.

Чтобы отличить вас, вам нужно использовать альфа-канал:

var density = (pix[i] + pix[i + 1] + pix[i + 2]) * (pix[i + 3] / 255) / 3;
//                                               ^^^^^^^^^^^^^^^^^^^^

Это, конечно, один из способов сделать это. Чтобы избежать сглаживания пикселей, которые должны быть частью вычисления, вы просто используете порог вместо этого.

какой я дебил ... по умолчанию "цвет" холста не белый ... спасибо!