watermark/demo.html at master · wj100/watermark · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./dist/watermark.min.js"></script> -->
</head>

<body>
<span class="content" style="font-size: 14px;">你的施工方都是</span>
</body>
<script>
    function getTextWidth(str = '') {
  const dom = document.createElement('span');
  dom.style.display = 'inline-block';
  dom.textContent = '天猫旗舰店   49.67%(tmall)';
  document.body.appendChild(dom);
  const width = dom.clientWidth;
  console.log(dom.clientWidth);
  document.body.removeChild(dom);
  return width;
}
    const str='你的施工方都是'
    //content写入 str
    const content = document.querySelector('.content')
    content.textContent = str
    console.log(1111,getTextWidth(str))
    content.innerHTML = str
    const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d');
        console.log(2222,ctx.measureText(str).width)
</script>
<!-- <script>
    watermarkObj.watermark({
        id: 'sdfsdgdrf', // 水印总体的id
        text: '汪骏@XXXX科技公司-wangjun自定自定义信息12320241212wj12345-自定自定义信息', // 水印的内容 使用\n换行
        color: `rgba(112, 113, 114, .1)`,
        density: 50,
        densityBase: 1,
        //以下参数非必填
        //parentSelector: null, // 水印插件挂载的父元素选取器,不输入则默认挂在body上
        // fontSize: 14, // 水印字体大小，以px为单位
        // parentLeft: 0, // 水印整体左边距离
        // parentTop: 0, // 水印整体顶边距离
        // parentRight: 0, // 水印整体右边距离
        // parentBottom: 0, // 水印整体顶边距离
        // singleWidth: 360, // 单个水印宽度
        // singleHeight: 110, // 单个水印长度
        // slope: -10, // 水印倾斜度数
    })
</script> -->

</html>