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

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

通过将文本放置在div中并获取div的偏移高度

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

---

使用基于web的编程有任何可能吗？

有简单的解决方案吗？我想答案是否定的

如果您对更复杂（处理器密集型）的解决方案满意，可以尝试以下方法：

将文本呈现到画布上，然后使用

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索引），然后减去以检索高度。

Jason回答时我正在编写代码，但我还是决定发布它： 如果你跟随评论，你应该知道发生了什么以及为什么。它工作得相当快，而且不像听起来那么复杂。使用GIMP进行检查，结果准确

（确保不会丢失的代码）：

//设置变量
var c=document.createElement（'canvas'），
div=document.getElementsByTagName（'div'）[0]，
out=document.getElementsByTagName（'output'）[0]；
//将画布的大小设置为与div相等
c、 宽度=div.offsetWidth；
c、 高度=俯视距离；
var ctx=c.getContext（'2d'）；
//从计算样式中获取div的字体并将其应用于上下文
ctx.font=window.getComputedStyle（div）.font；
//使用黑色以外的颜色，因为黑色和透明时所有像素均为0
ctx.fillStyle='#bbb'；
//在画布底部附近绘制文本
ctx.fillText（div.innerText，0，div.offsetHeight）；
//在画布的数据中循环查找第一个彩色像素
var data=ctx.getImageData（0，0，c.宽度，c.高度）。数据，
minY=0，len=data.length；
对于（变量i=0；i

编辑： 我甚至为此制作了jQuery插件：

---

享受。

在第一个示例中，为什么会有填充？那不是填充，而是标记的文本。所以我想，作为字体家族的一部分，它是自然填充的。这就是我想扔掉的帽子。@JohnSmith你能帮我做一个演示，这样我们就可以玩一玩了吗？因为那个空间可能有不同的原因。额外的垂直空间是由于下降的，即“j”，“g”，“y”。啊，我明白了。你能提供有问题的字体吗？我想这是唯一的解决方案。谢谢杰森，我会好好玩玩，看看是否值得。谢谢你，基拉，但我不能让它正常工作。我刚刚尝试了一个字体大小为3cm的div，它返回了7px作为输出。奇怪的是，对于“普通”和jQuery版本，它都返回了79px：也许你使用的是非标准字体，调用函数时它没有加载？我不这么认为。我在FF和IE上都试过。我的语言是丹麦语，不知道这是否有区别？另一件很奇怪的事；在第一个示例中，我实际上没有看到输出。我不得不更改它以获得元素的ID。@JohnSmith首先，IE中没有画布实现（除非您使用IE9/10和

）。其次，FF的

窗口.getComputedStyle

实现没有公开

font

属性，因此我不得不稍微更改代码。它现在可以工作了（上面是repo的jQuery插件）。

// 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';