Background: When developing mobile terminal internal applications, there are security issues. We often see watermarks on enterprise wechat or pictures to prevent information from being leaked, so we make a copy for this development and record it.

The renderings are as follows:

I. Implementation principle

  • 1. First use canvas to draw watermarks
  • Create a masked div that can be overlaid on the page and set pointer-events: None
  • 3. Repeat rendering the watermark drawn by canvas on the div created in the second step as the background image
  • 4. Insert the third watermark div into the container

Two, component packaging

1. Create a mobile terminal project, see detailsBuilding methods

2. Define the parameters received by the component, including the watermarking overlay style and text content

import PropTypes from 'prop-types'
WaterMark.propTypes = {
  className: PropTypes.string,
  txt: PropTypes.string,
  restProps: PropTypes.object
}
WaterMark.defaultProps = {
  txt: "watermark"
}
Copy the code

3. Create a container to contain the pages to be watermarked

<div
      className={`watermark_wrapperThe ${className? ` ${className} `:""} `}style={{ position: "relative"}} {. restProps}
    >
      {children}
</div>
Copy the code

4. Canvas draws watermarks

Set the watermark size, text style, rotation Angle, etc., and finally return a canvas.

const generateWaterLog = (content) = > {
    const canvas = document.createElement("canvas");
    canvas.setAttribute("width"."100px");
    canvas.setAttribute("height"."100px");
    const ctx = canvas.getContext("2d");
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fontSize = 24;
    ctx.fillStyle = "Rgba (184, 184, 184, 0.8)";
    ctx.rotate(-(Math.PI / 180) * 30);
    ctx.fillText(content, 100 / 2.100 / 2);
    return canvas
}
Copy the code

5. Create a mask and place the watermark drawn in the previous step on it

Set the mask div to be placed on the text surface by absolute positioning, convert the canvas to Base64, and repeat rendering on the mask as the background image. This will cause the page server to click action, so set pointer-events: None; Disable the masked mouse event. This does not affect the operation of the actual content.

const generateWaterMark = (canvas) = > {
    const bg_url = canvas.toDataURL()
    const waterMarkDiv = document.createElement("div");
    const style = `
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      pointer-events: none;
      background-repeat: repeat;
      background-image: url('${bg_url}')
    `;
    waterMarkDiv.setAttribute("style", style);
    waterMarkDiv.setAttribute("class"."watermark-bg");
    return waterMarkDiv
}
Copy the code

6. Render watermarks

Generate a mask layer, and render the watermark, call the watermark generation function, get the container to render the watermark, and insert watermark div into it, here to exclude the div className is the watermark mask layer

generateTextWatermark(txt, document.body.querySelectAll(".watermark_wrapper"))

const generateTextWatermark = (content, container) = > {
    const canvas = generateWaterLog(content)
    const waterMarkDiv = generateWaterMark(canvas)
    Array.from(container).forEach((node) = > {
      if(! node.getElementsByClassName("watermark-bg").length) {
        node.appendChild(waterMarkDiv.cloneNode(true)); }}); };Copy the code

7, call

import { WaterMark } from ".. /.. /components"
<WaterMark>
    <div>Text that needs to be watermarked</div>
</WaterMark>
Copy the code

3. Demo examples

Yarn installation

yarn add ucloud-ui
Copy the code

NPM install

npm install -S ucloud-ui
Copy the code

use

import React from "react"; import { WaterMark } from 'ucloud-ui' function Demo() { return ( <WaterMark> <div className="padding10 font-size-14 Demo "> <h2 className="text-center font-size-16"> Demo </h2> <header className="text-indent-2"> This agreement shall be legally binding on users' use of the Product. You undertake and warrant that you have the right and ability to enter into this Agreement. Users start to use this product will be treated as have to accept this agreement, please carefully read and understand the various provisions of the provisions of this agreement, including the exemption and limit our disclaimer and restriction on the rights of the user review (minors should be accompanied by legal guardian), if you can't accept all the terms of this agreement, please do not start using this product. </header> <div> <h4> <p className="text-indent-2"> Your use of the Product must be lawful and the Product will retain or terminate your account in accordance with the provisions of "Modification and Termination" of this Agreement. You must promise to keep your login information confidential, not to be accessed or used by others, and to be responsible for all your actions under this account. You must notify the product of any unauthorized use or suspected unauthorized use that may violate the law at the first time. The product is not liable for any loss caused by your failure to comply with the above requirements. </p> </div> </div> </WaterMark> ); } export default Demo;Copy the code