通过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>