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
  • 相关阅读:
    UICollectionView的简单使用(一)
    天气预报接口IOS版OC:SmartWeather API中key的计算方法
    IOS下Base64加密
    IOS下DES加密
    IOS的URL中文转码
    CTE Recursion Performance
    走过而立之年的Coder
    iOS多线程编程之锁的理解
    iOS设置PCH文件
    程序员:伤不起的三十岁
  • 原文地址:https://www.cnblogs.com/leslie1943/p/13358126.html
Copyright © 2011-2022 走看看