Vue Canvas图片水印的绘制 图片加水印

效果

定义画布

<canvas width="800" height="800"  ref="cn" ></canvas>
1

绘制水印

 draw(){
      const img = new Image()
      img.src='https://img1.baidu.com/it/u=3035183739,1826404114&fm=253&fmt=auto&app=138&f=JPEG'
      img.onload=(()=>{
      
      const canvas =this.$refs.cn
      //获取元素
      
      const p =canvas.getContext('2d')
      //定义画笔
      
       //p.drawImage(img,0,0) //图片绘制在画布的什么位置
       
        p.drawImage(img,0,0,canvas.width,canvas.height) 
        //图片等比例自适应画布
       
        p.font='30px 微软雅黑 '
        //画笔的样式 大小 字体
        
        p.fillStyle='rgba(255,255,255,0.5)'
        //文字的颜色

        p.rotate(0.3);
		//文字倾斜
		
        // p.fillText('CSDN有限公司',20,40,180)
        //只绘制一个
        
         let txt ='   '+'梅州市粤运汽车运输有限公司'+'    '
		//水印文本
		
        let textMetrics = p.measureText(txt).width;
        //计算文本的宽度

        for (let i=0;i<5;i++)
          {//行
          
            for(let j=0;j<5;j++)
            {
            //列
            
             // 测量文本的大小 并且偏移
              p.fillText(txt,textMetrics*j,i*180,textMetrics)
            }
          }
      })
    },
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