通过canvas生成水印方案

通过自定义指令生成canvas水印原理

• 水印（watermark）是一种容易识别、被夹于纸内，能够透过光线穿过从而显现出各种不同阴影的技术。
  实现
• 前端实现的水印基本都是不安全的，可被破解的
• 使用canvas生成base64格式的图片文件，并将其设置为对应元素的背景图片，从而产生水印效果
• 通过绑定vue自定义指令，可以快速实现页面或组件局部水印效果

实现

• 创建directives.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 = 300;
      can.height = 200;
      can.style.display = 'none';
      var cans = can.getContext('2d');
      cans.rotate(-20 * Math.PI / 180);
      cans.font = font || "16px PingFang SC";
      cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
      cans.textAlign = 'left';
      cans.textBaseline = 'Middle';
      cans.fillText(str, can.width / 3, can.height / 2);
      parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
  })

• main.js 引入directives.js

  import  '@/utils/directives'

使用

<template>
  <div v-watermark="{text:'水印',textColor:'rgba(180, 180, 180, 0.3)'}">
    这里是内容区域！
  </div>
</template>