javascript - レンダリングされた/表示されたテキストの高さを見つける

Question

フォントのこの高さを取得する方法を知っています：

テキストをdivに配置し、divのオフセットの高さを取得します。

しかし、私はこの実際の高さを取得したいと思います（これはフォントファミリーによって異なります）：

それは、Webベースのプログラミングを使用して何らかの方法で可能ですか？

Answer 1

簡単な解決策はありますか？答えはノーだと思います。

より複雑な（そしてプロセッサを集中的に使用する）ソリューションに問題がない場合は、次のことを試すことができます。

テキストをキャンバスにレンダリングしてから、を使用canvasCtx.getImageData(..)してピクセル情報を取得します。次に、この擬似コードが説明するのと同様のことを行います。

first_y : null
last_y : null
for each y:
    for each x:
        if imageData[x][y] is black:
            if first_y is null:
                first_y = y
            last_y = y
height = last_y - first_y

これは基本的に、レタリング（黒いピクセル）の上部（最低のyインデックス）を探し、下部（最高のyインデックス）を差し引いて高さを取得します。

Answer 2

ジェイソンが答えている間、私はコードを書いていましたが、とにかくそれを投稿することにしました：http: //jsfiddle.net/adtn8/2/ コメントに従うと、何が起こっているのか、そしてその理由がわかるはずです。それはかなり速く動作し、聞こえるかもしれないほど複雑ではありません。GIMPで確認したところ、正確です。

（失われないようにするためのコード）：

// setup variables
var c = document.createElement('canvas'),
    div = document.getElementsByTagName('div')[0],
    out = document.getElementsByTagName('output')[0];

// set canvas's size to be equal with div
c.width = div.offsetWidth;
c.height = div.offsetHeight;

var ctx = c.getContext('2d');
// get div's font from computed style and apply it to context
ctx.font = window.getComputedStyle(div).font;
// use color other than black because all pixels are 0 when black and transparent
ctx.fillStyle = '#bbb';
// draw the text near the bottom of the canvas
ctx.fillText(div.innerText, 0, div.offsetHeight);

// loop trough the canvas' data to find first colored pixel
var data = ctx.getImageData(0, 0, c.width, c.height).data,
    minY = 0, len = data.length;
for (var i = 0; i < len; i += 4) {
    // when you found it
    if (data[i] != 0) {
        // get pixel's y position
        minY = Math.floor(i / 4 / c.width);
        break;
    }
}

// and print out the results
out.innerText = c.height - minY + 'px';

編集：

私もこれのためにjQueryプラグインを作りました：https ：//github.com/maciek134/jquery-textHeight

楽しみ。