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

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

享受。