Question

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

E.g。 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");

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://stackoverflow.com/a/30204783/1693593

JavaScript将文本转换为像素坐标

1 个答案: