使用代码给图片加水印，如何计算水印文字所占的宽度和高度？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 868 天前的主题，其中的信息可能已经有所发展或是发生改变。

不需要考虑旋转角度。

水印

宽度

旋转

代码

7 条回复 • 2022-08-13 16:40:51 +08:00

abaaba0909

2022-08-12 17:33:23 +08:00

根据你图片大小按百分比计算一下就行了

lzj724

2022-08-12 17:48:41 +08:00

export function getDWordLength(str) {

let chinaLen = 0
let otherLen = 0

for (let i in str) {
if (str[i].charCodeAt() <= 255) {
otherLen++
} else {
chinaLen++
}
}

return chinaLen + otherLen / 2

}

export function getStrWidth(str, fontSize = 12, letter = 0) {
return getDWordLength(str) * (fontSize + letter)
}

kkeep

2022-08-12 20:29:43 +08:00 via Android

水印文字不是固定的么。字体啥的

arch9999

2022-08-12 21:04:43 +08:00

000000
000000
000000

000000
000000
001100

reter

2022-08-12 21:25:01 +08:00

#2 的做法不可取

OP 的需求是获取渲染文字时所占用的宽度，不是简单用 "字符串的长度 * 字体大小" 就可以解决的。

比较显著的因素有：字体的选择，字体大小，字符的间距，行高，字体是等宽还是非等宽，渲染效果，实际的渲染环境等。这些都会影响渲染后字体的宽度和高度。

建议查阅所使用绘图的 API 文档，一般都会提供 API 用于测量字体的渲染信息。比如

https://docs.oracle.com/javase/7/docs/api/java/awt/FontMetrics.html

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText

关键词 FontMetrics, measureText

hsuyeung

2022-08-12 23:25:45 +08:00 via iPhone

@reter 啊对的，就是这个意思，我问题的表达不是特别准确，感谢！

byzod

2022-08-13 16:40:51 +08:00

其实还挺麻烦的
精度要求不高偷懒可以直接按中文、字母 m 宽度和 x 高度来估算
css 就是这样的