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
  • 相关阅读:
    在CentOS 8 上 部署 .Net Core 应用程序
    Asp.Net Core 查漏补缺《一》 —— IStartFilter
    接口相关数据日志打印
    退款
    识别身份证
    生成二维码
    打造一款简单易用功能全面的图片上传组件
    Redis过期策略+缓存淘汰策略
    Redis主从复制
    .net 平台常用框架
  • 原文地址:https://www.cnblogs.com/leslie1943/p/13358126.html
Copyright © 2011-2022 走看看