Question

我试图使用带有javascript的HTML5画布来获取任何角色的像素密度，但是上下文getImageData总是返回一个似乎是一个黑色矩形矩阵（RGB = [0,0,0]总是）。

谁能告诉我，我做错了什么？

＆＃13;

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"));

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

有趣，黑色返回RGB 0中的零是黑色。不需要setTimeout。

＆＃13;

//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")

 
};

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

默认像素值为黑色透明，因此当颜色为黑色时，您将始终返回RGB。

要区分您需要使用Alpha通道：

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

这只是一种方法。为避免消除锯齿的像素成为计算的一部分，您只需使用阈值。

fillText返回0后获取画布像素

2 个答案: