fillTextの後にキャンバスピクセルを取得する

Question

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>

Answer 1

デフォルトのピクセル値は、透明な黒であるので、あなたは常に色が黒であるとき、RGBは0を返す必要があります。これはもちろん、それを行うためのひとつの方法である

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

：あなたを区別するために

は、アルファチャンネルを使用する必要があります。アンチエイリアス処理されたピクセルが計算に含まれないようにするには、代わりにしきい値を使用します。

Answer 2

おもしろ、ブラックリターンのゼロ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>