vue 设置水印

1、根据 用户自己设置的内容，进行水印展示

      使用表单，利用双向绑定，来设置每一项的值

2、创建 warterMark.js 用于放生成水印的操作， 在utils 文件下、

      let addWaterMark = (str,fontSize,color,fontWeight,style) => {
      let id = '1.23452384164.123412415'
      if (document.getElementById(id) !== null) {
          document.body.removeChild(document.getElementById(id))
      }
	   //创建一个画布
	  let can = document.createElement('canvas')
    // 设置canvas画布大小
    can.width = 150
    can.height = 80
    let cans = can.getContext('2d')
    cans.translate(20,20)  //
    // cans.rotate(-20*Math.PI/180);  0  
    cans.rotate(style.angle * Math.PI / 180) // 水印旋转角度  0 水平  -90  垂直
    cans.font = fontSize +'px ' + fontWeight
    cans.globalAlpha = 0.5; // 设置图像透明度为0.2
    cans.fillStyle = color //设置填充绘画的颜色、渐变或者模式
    cans.textAlign = 'center' //设置文本内容的当前对齐方式
    cans.textBaseline = 'Middle' //设置在绘制文本时使用的当前文本基线
    cans.fillText(str,0, 0) // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
	  // cans.fillText(str2, can.width / 2, can.height + 22)//根据需求可添加多行水印，在方法中添加str2..
	  let div = document.createElement('div')
	  div.id = id
	  div.style.pointerEvents = 'none'
	  div.style.zIndex = '100000'
	  div.style.width = 200+ 'px'
	  div.style.height = 200 + 'px'
	  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'

  		document.getElementById('securityINfo-right-show').appendChild(div)  // 添加到你想要展示的div 

  	// document.body.appendChild(div)
		  return id
}
// 添加水印
export function setWaterMark(str,fontSize,color,fontWeight,direction) {
    let id = addWaterMark(str,fontSize,color,fontWeight,direction)
    if (document.getElementById(id) === null) {
      id = addWaterMark(str,fontSize,color,fontWeight,direction)
    }
  }
  // 移除
  export function clearWatermark() {
    let id = '1.23452384164.123412415'
    if (document.getElementById(id) !== null) {
      // document.body.removeChild(document.getElementById(id))
      document.getElementById('securityINfo-right-show').removeChild(document.getElementById(id))   //   要和上面添加的div 一致
    }
  }

3、在组件中使用

 import { setWaterMark,clearWatermark }  from "@/utils/warterMark.js";
 
 点击确认按钮调用：  
      setWaterMark(this.form.content,this.form.fontSize,this.form.color,this.form.fontStyle,this.style) 
      
 选择方向：
     <el-select v-model="form.style" @change=changeStyle>
            <el-option label="水平" value="1">水平</el-option>
            <el-option label="垂直" value="2">垂直</el-option>
     </el-select>
     
     changeStyle(value){
        console.log(value)
       if(value == 1){ // 水平
         this.style={
           angle:0
         }
       } else {  // 垂直
        this.style={
           angle:-90
         }
       }
      }

4、展示效果