预览加水印

src/utils/date.js

@@ -0,0 +1,34 @@
+/**
+ * 时间格式化
+ * @param value
+ * @param fmt
+ * @returns {*}
+ */
+export function formatDate(value, fmt) {
+	let regPos = /^\d+(\.\d+)?$/
+	if (regPos.test(value)) {
+		//如果是数字
+		let getDate = new Date(value)
+		let o = {
+			'M+': getDate.getMonth() + 1,
+			'd+': getDate.getDate(),
+			'h+': getDate.getHours(),
+			'm+': getDate.getMinutes(),
+			's+': getDate.getSeconds(),
+			'q+': Math.floor((getDate.getMonth() + 3) / 3),
+			'S': getDate.getMilliseconds()
+		}
+		if (/(y+)/.test(fmt)) {
+			fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
+		}
+		for (let k in o) {
+			if (new RegExp('(' + k + ')').test(fmt)) {
+				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+			}
+		}
+		return fmt
+	} else {
+		value = value.trim()
+		return value.substr(0, fmt.length)
+	}
+}

src/utils/warterMark.js

@@ -0,0 +1,53 @@
+import Vue from 'vue'
+
+/**
+ * 使用方式
+ * 1.引入import '@/utils/warterMark'
+ * 2.需要加水印的添加如下命令
+ * v-watermark="{text: '水印名称', textColor: 'rgba(100, 100, 100, 0.6)'}"
+ */
+Vue.directive('watermark', {
+  bind: function(el, binding){
+    // 水印文字，父元素，画布宽度，画布高度，字体，文字颜色，画布横坐标，是否铺满全页
+    function addWaterMarker(str, parentNode, width, height, font, textColor, fillTextX = '10', isFull = false){
+      // 检查父元素是否包含子元素
+      const elementContains = (parent, child) => parent !== child && parent.contains(child)
+      const flag = elementContains(parentNode, document.querySelector('canvas'))
+      // 防止重复创建
+      if (!flag) {
+        let can = document.createElement('canvas')
+        parentNode.appendChild(can)
+        can.width = width || 200
+        can.height = height || 140
+        can.style.display = 'none'
+        let cans = can.getContext('2d')
+        cans.rotate(-20 * Math.PI / 180)
+        cans.font = font || '13px Microsoft Yahei'
+        cans.fillStyle = textColor || '#DDDDDD'
+        cans.textAlign = 'left'
+        cans.textBaseline = 'Middle'
+        cans.fillText(str, fillTextX, can.height)
+        // 设置背景图（整个项目中都添加水印建议使用此方法）
+        if(isFull) {
+          parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
+        } else {
+          // 创建div 定位覆盖（某个元素，如图片添加水印建议使用此方法）
+          let div = document.createElement('div')
+          div.id = str
+          div.style.pointerEvents = 'none'
+          div.style.top = '0'
+          div.style.left = '0'
+          div.style.position = 'absolute'
+          div.style.zIndex = '100000'
+          div.style.width = '100%'
+          div.style.height = '100%'
+          div.style.background = 'url(' + can.toDataURL('image/png') + ')'
+          parentNode.appendChild(div)
+        }
+      }
+    }
+    if (binding.value.text) {
+      addWaterMarker(binding.value.text, el, binding.value.width, binding.value.height, binding.value.font, binding.value.textColor, binding.value.fillTextX, binding.value.isFull )
+    }
+  }
+})