JavaScript将文本转换为像素坐标

Question

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

例如，I可能会变成

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

编辑：我不是在寻找边界框，而是在寻找组成文本的每个像素的坐标。我需要这些信息来使用正方形重新创建文本。

- Kevin Pei

---

如果是字符串，您可以使用split函数将其转换为数组；如果您正在使用对象，则可以使用对象的索引访问该值。 - Jorge Mejia

Answer 1

是的，你可以使用canvas元素来获取文本度量：

// 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");

metrics对象将为您提供宽度和高度等信息。但是，在大多数浏览器中，目前仅支持宽度。存在一个poly-fill，可以覆盖诸如上升和下降之类的内容，这是您需要的。

另一种方法是扫描位图以检测文本转换的矩形。我在这里给出了一个涵盖该技术的答案： JavaScript Method to detect area of a PNG that is not transparent 此外，如果您只需要文本的边界框（而不是像素精确的文本起点），则可以使用DOM元素获取该框的宽度和高度。以下是其中的一个方法： Use Javascript to get Maximum font size in canvas 澄清后更新： 用于从位图中提取像素并将其转换为点的方法： https://dev59.com/5Gcs5IYBdhLWcg3woFXt#30204783

- user1693593

---

也许我应该稍微澄清一下我的问题。我不是在寻找边界框，而是在寻找组成文本的每个单独像素的坐标。我需要这些信息来使用正方形重新创建文本。 - Kevin Pei

@KevinPei 那么你可能正在寻找类似这样的东西：https://dev59.com/5Gcs5IYBdhLWcg3woFXt#30204783 ？ - user1693593

非常好，这正是我想要的！谢谢！ :) - Kevin Pei

@KevinPei 没问题！ :) - user1693593