使用自定义指令给前端页面或图片或视频添加水印

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

一、新建 watermark.js

import Vue from 'vue'

Vue.directive('watermark', (el, binding) => {
   function addWaterMarker(str, parentNode, font, textColor) {// 水印文字，父元素，字体，文字颜色
       var can = document.createElement('canvas');
       parentNode.appendChild(can);
       can.width = 400;
       can.height = 200;
       can.style.display = 'none';
       var cans = can.getContext('2d');
       cans.rotate(-15 * Math.PI / 180);//旋转角度
       cans.font = font || "24px Microsoft JhengHei";
       cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
       cans.textAlign = 'left';
       cans.textBaseline = 'Middle';
       // cans.fillText(str, can.width / 3, can.height / 2);
       for (let i = 0; i < 800 / can.height; i++) {
           for (let j = 0; j < can.width / 50; j++) {

               cans.fillText(str, i * 200, j * 100)
           }
       }
       parentNode.src = can.toDataURL("image/png");
   }
   addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
})

二、min.js 引入 watermark.js

import '@/directive/watermark'

三、调用指令

			<img
              v-watermark="{
                text: watermark,
                textColor: 'rgb(180, 180, 180)',
              }" 
            />

如果是覆盖在图片上的话需要再修改一下样式，大致就是这样

效果如图：

如果要添加的水印多的话，不建议前端处理水印问题，因为会降低性能。

参考文章（侵删）

四、水印防盗

刚刚那样图片虽然显示会有水印，但是没有防盗作用，关于防盗这里可以参考一篇文章，参考文章（侵删）

可以采用base64位的方式等。

四、视频水印

视频也可以这样添加水印，直接覆盖在视频上方，然后点击水印的时候调用播放和停止的方法，但是这样有一个问题就是全屏的时候，video层级会变成最高，这样水印就无法显示，只能自己重新写控制器control。

重写控制条