canvas 标签

水印组件封装

使用 Canvas 生成水印，并使用 MutationObserve （可以监听 DOM 结构变化的接口）监视 DOM 的变动，使得水印不可被删除、且属性不可被修改

源码如下

import * as React from "react";
import { watermark } from "../../utils/watermark";

export default class WaterMark extends React.Component {
  constructor(props) {
    super(props);

    this.container = null;
  }

  componentDidMount() {
    const { style, ...options } = this.props;
    watermark({
      container: this.container,
      ...options,
    });
  }

  render() {
    const style = {
      position: "relative",
      ...this.props.style,
    };
    return (
      <div ref={(el) => (this.container = el)} id="watermark" style={style}>
        {this.props.children}
      </div>
    );
  }
}

wangdongovo...大约 2 分钟

react 组件封装

水印组件封装