V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
hsuyeung
V2EX  ›  问与答

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

  •  
  •   hsuyeung · 2022-08-12 17:19:08 +08:00 · 900 次点击
    这是一个创建于 616 天前的主题,其中的信息可能已经有所发展或是发生改变。

    不需要考虑旋转角度。

    7 条回复    2022-08-13 16:40:51 +08:00
    abaaba0909
        1
    abaaba0909  
       2022-08-12 17:33:23 +08:00
    根据你图片大小按百分比计算一下就行了
    lzj724
        2
    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
        3
    kkeep  
       2022-08-12 20:29:43 +08:00 via Android
    水印文字不是固定的么。字体啥的
    arch9999
        4
    arch9999  
       2022-08-12 21:04:43 +08:00
    000000
    000000
    000000

    000000
    000000
    001100
    reter
        5
    reter  
       2022-08-12 21:25:01 +08:00   ❤️ 4
    #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
        6
    hsuyeung  
    OP
       2022-08-12 23:25:45 +08:00 via iPhone
    @reter 啊对的,就是这个意思,我问题的表达不是特别准确,感谢!
    byzod
        7
    byzod  
       2022-08-13 16:40:51 +08:00
    其实还挺麻烦的
    精度要求不高偷懒可以直接按中文、字母 m 宽度和 x 高度来估算
    css 就是这样的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   985 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:50 · PVG 06:50 · LAX 15:50 · JFK 18:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.