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

文章作者: Damao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Damao !
  目录