zoukankan      html  css  js  c++  java
  • Vue 给页面加水印指令(directive)

    页面需要水印

    import Vue from 'vue'
    /**
     * watermark 指令
     * 解决: 给页面生成水印
     * 基本原理:给选择器添加背景图片
     * 用法:v-watermark="{options}"
     * option:
     * @param {string} text 水印文字
     * @param {string} width 宽度
     * @param {string} textColor 文字颜色
     */
    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(-20 * Math.PI / 180)
        cans.font = font || '16px Microsoft JhengHei'
        cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
        cans.textAlign = 'center'
        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)
    })
    

    使用(Vue组件)

    <div
          class="body"
          id="pdf-container"
          v-watermark="{text:'水印文字',font:'46px Microsoft JhengHei','100%',textColor:'rgba(180, 180, 180, 0.3)'}"
        >
    
    Keep learning
  • 相关阅读:
    No module named yum错误的解决办法
    Linux下redis的安装
    Linux crontab命令的使用方法
    mysql时间查看以及定时器相关操作
    python zookeeeper 学习和操作
    使用 python 操作 redis
    Linux命令(2)- mv
    mysql 命令行参数
    框架设计
    MediatR使用
  • 原文地址:https://www.cnblogs.com/leslie1943/p/13358126.html
Copyright © 2011-2022 走看看