How to add watermark background to page elements, how to deal with it in vue?

Your three-link support is the driving force for my creation!
Here is a simple way to add a watermark background to page elements, mainly to add text lines.

Step 1: Draw the watermark on the canvas

The comments I wrote here are very detailed. If you don’t know it, you can look at the relevant APIs of canvas.

/**
 *  给一个页面元素添加水印背景
 * @param text 文字内容
 * @param textColor 文字颜色
 * @param backgroundColor 背景色
 * @param sourceBody 挂载元素
 */
function setWatermark({
     
     text, textColor, backgroundColor}, sourceBody) {
    
    
    let can = document.createElement('canvas')
    can.width = 150
    can.height = 120

    let cans = can.getContext('2d')
    cans.rotate(-20 * Math.PI / 180)
    cans.font = '15px Vedana'

    cans.fillStyle = textColor
    cans.textAlign = 'left'
    cans.textBaseline = 'Middle'
    cans.fillText(text, can.width / 20, can.height)
    sourceBody.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
    sourceBody.style.backgroundColor = backgroundColor
}


export default setWatermark

Step 2: Register a custom directive

1. If it is in an ordinary project, you can directly call the above method to achieve a simple watermark background effect.
2. Here we focus on the way of using custom instructions in vue:
   why use custom instructions? Mainly because the custom command contains the page element parameter el, so the custom command is mainly used to do this job.

        app.directive('w-watermark', (el, binding) => {
    
    
            watermark({
    
    
                text:binding.value.label,
                textColor:"rgba(219,219,219,0.41)",
                backgroundColor:"#F5F6F7",
            },el)
        })

Step 3: Apply Custom Directive

You can modify it by yourself, pass in more parameters, or change the way of passing in parameters!

  <div class="ork-body" v-w-watermark="{label:'12321321'}">
    <router-view></router-view>
  </div>

Your three-link support is the driving force for my creation!