设置emoji水印右侧留白

[wangyuzhu1]

问题描述

文本模式下，设置fontSize=16px，传入emoji时，emoji右侧有留白

复现步骤

const watermark = new Watermark({
"width": 300,
"height": 300,
"rotate": 45,
"contentType": "text",
"content": "测试😋😄",
"globalAlpha": 0.5,
"mode": "default",
"textType": "fill",
"lineHeight": 30,
"fontSize": "16px",
"fontFamily": "sans-serif",
"fontStyle": "",
"fontVariant": "",
"fontColor": "#000",
"fontWeight": "normal",
"filter": "none",
"letterSpacing": "0px"
})

环境详情

• watermark-js-plus version: 1.5.7
• vue version: 3.4.27
• Chrome version: 135.0.7049.116（正式版本） (arm64)

[zhensherlock]

初步排查发现，该问题出现在使用高清显示器时，代码会绘制一个高分辨率的 canvas。在这种情况下，如果文字中包含 emoji 表情，可能会导致上述显示异常。目前 Chromium 社区已经有人提交了相关 issue，具体可见：https://issuetracker.google.com/issues/396175943?pli=1 我们后续关注 Chromium 是否会进行修复。目前我们也观察到 ECharts 在相同场景下也会出现类似的问题。