feat(component): 支持水印功能 !#en: add watermark

ly525
1 parent 8c1626a5
Showing 2 changed files with 83 additions and 4 deletions
front-end/h5/src/components/plugins/lbp-background.js
front-end/h5/src/utils/dom-helper.js
@@ -9,9 +9,29 @@
  * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  */
 import PropTypes from '@luban-h5/plugin-common-props'
+import { renderWaterMark } from '../../utils/dom-helper'
 export default {
   name: 'lbp-background',
+  props: {
+    imgSrc: PropTypes.image({ label: '背景图' }),
+    backgroundColor: PropTypes.color({ label: '背景色', defaultValue: 'rgba(255, 255, 255, 0.2)' }),
+    waterMarkText: PropTypes.string({ label: '水印文字', defaultValue: '水印文字' }),
+    waterMarkFontSize: PropTypes.number({ label: '水印文字大小(px)', defaultValue: 16 }),
+    waterMarkRotate: PropTypes.number({ label: '水印旋转角度', defaultValue: 10 }),
+    waterMarkColor: PropTypes.color({ label: '水印文字颜色', defaultValue: 'rgba(184, 184, 184, 0.2)' })
+  },
+  methods: {
+    renderWaterMark () {
+      renderWaterMark({
+        container: this.$refs.root,
+        content: this.waterMarkText,
+        fontSize: this.waterMarkFontSize,
+        rotate: this.waterMarkRotate,
+        fillStyle: this.waterMarkColor
+      })
+    }
+  },
   render () {
     let style = {
       width: '100%',
@@ -35,13 +55,16 @@ export default {
     return (
       // [知识点:CSS] : https://codesandbox.io/s/ziyuansuzindexzaigao-wufafugaifuyuansudexiongdiyuansu-n15rd?file=/index.html
-      <div style="width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 0; opacity: 1;">
+      <div style="width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 0; opacity: 1;" ref="root">
         <div style={style}></div>
       </div>
     )
   },
-  props: {
-    imgSrc: PropTypes.image(),
-    backgroundColor: PropTypes.color({ label: '背景色', defaultValue: 'rgba(255, 255, 255, 0.2)' })
+  mounted () {
+    this.renderWaterMark()
+
+    ;['waterMarkText', 'waterMarkFontSize', 'waterMarkRotate', 'waterMarkColor'].forEach(key => {
+      this.$watch(key, this.renderWaterMark)
+    })
   }
 }
@@ -9,3 +9,59 @@ export function contains (root, n) {
   return false
 }
+
+/**
+ *
+ * @param {*} param0 canvas 实现 watermark
+ */
+export function renderWaterMark ({
+  // 使用 ES6 的函数默认值方式设置参数的默认取值
+  // 具体参见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters
+  container = document.body,
+  width = '100px',
+  height = '100px',
+  textAlign = 'center',
+  textBaseline = 'middle',
+  fontSize = 16,
+  fillStyle = 'rgba(184, 184, 184, 0.2 )',
+  content = '水印文字',
+  rotate = 0,
+  zIndex = 1000
+} = {}) {
+  var canvas = document.createElement('canvas')
+
+  canvas.setAttribute('width', width)
+  canvas.setAttribute('height', height)
+  var ctx = canvas.getContext('2d')
+
+  ctx.textAlign = textAlign
+  ctx.textBaseline = textBaseline
+  ctx.font = `${fontSize}px Arial`
+  ctx.fillStyle = fillStyle
+  // ctx.rotate(Math.PI / 180 * rotate);
+  ctx.fillText(content, 0, parseFloat(height) / 3)
+
+  var base64Url = canvas.toDataURL()
+  const wmEl = document.querySelector('.luban_h5__wm')
+
+  const watermarkDiv = wmEl || document.createElement('div')
+  const styleStr = `
+    transform: rotate(${rotate}deg);
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    z-index:${zIndex};
+    pointer-events:none;
+    background-repeat:repeat;
+    background-image:url('${base64Url}')`
+
+  watermarkDiv.setAttribute('style', styleStr)
+
+  if (!wmEl) {
+    watermarkDiv.classList.add('luban_h5__wm')
+    container.style.position = 'relative'
+    container.insertBefore(watermarkDiv, container.firstChild)
+  }
+}