查找渲染/可见文本的高度

Question

我知道如何获得字体的高度：

将文本放在div中并获得div的偏移高度。

但我想得到这个实际高度（这将取决于字体系列）：

使用基于网络的编程是否可能以任何方式实现？

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

我正在写代码而Jason回答，但我决定发布它： 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

享受。