JavaScript 将文本转换为像素坐标

Question

简而言之，给定一个字体（大小、粗细等）和一个字符串，有没有一种方法可以使用 JavaScript 提取相对于第一个字母左上角的像素坐标数组？

例如I 可能会变成

[
[0,0],
[0,1],
...
]

编辑： 我不是在寻找边界框，而是在寻找构成文本的每个像素的坐标。我需要此信息以便稍后使用正方形重新创建文本。

Answer 1

是的，可以使用canvas元素获取text metrics:

// setup canvas
var c = document.createElement("canvas"),
    ctx = c.getContext("2d");

// define (pre-loaded) font:
ctx.font = "bold 16px sans-serif";

// get metrics
var m = ctx.measureText("Hello");

指标对象会给你宽度和高度等。但是 - 目前大多数浏览器只支持宽度。存在一个 poly-fill，它将涵盖您需要的上升和下降等内容。

另一种方法是扫描位图以检测文本隐藏的矩形。我在这里给出了涵盖此技术的答案：

Javascript Method to detect area of a PNG that is not transparent

此外，如果您只需要文本的边界框（而不是文本本身的像素精确起点），您可以使用 DOM 元素来获取该框的宽度和高度。这是一种方法：

Use Javascript to get Maximum font size in canvas

澄清后更新：从位图中提取像素并将其转换为点：

JavaScript 将文本转换为像素坐标

JavaScript convert text to pixel coordinates

javascript

text

canvas

pixels

coordinates