preface

Coding should be a lifelong career, not just 30 youth rice This article has included making https://github.com/ponkans/F2E, welcome to Star, continuously updated

In web browsing, web watermarking is often needed to prevent users from being unable to trace the source of users after sensitive information is exposed in screenshots or screen recordings. Such as nail nail, feishu software, chat background will have your name.

Water Monster today takes you hand in hand to implement a custom watermark NPM package and publish it to the NPM repository.

Train of thought

  • Get tag information, such as user name, user ID, etc. (that is, the target object you want to watermark)
  • Drawing watermark, drawing tool we can use canvas

implementation

Create an NPM project
mkdir watermarkly && cd watermarkly

npm init

touch index.js

touch README.md

Copy the code
Open parameters
  • FontSize: indicates the fontSize of the watermark
  • Color: indicates the watermark font color
  • Id: Canvas id
  • Text: watermark copy
  • Size: indicates the watermark size
  • Clarity: Watermark clarity
Create a canvas

Canvas canvas is generated based on the ID. If no ID parameter is passed in, a random string is automatically generated to prevent conflicts with other DOM ids on the page. If a canvas corresponding to the ID already exists, you need to delete it and generate it.

The canvas size is the available screen size. The canvas fix is fixed in the visual window with a z-index of -1.

// Delete the existing canvas

let oldCanvas = document.getElementById(this.params.id);

if(oldCanvas){

    oldCanvas.parentNode.removeChild(oldCanvas);

}



// Create canvas

let body = document.getElementsByTagName('body');

let width = window.screen.width;

let height = window.screen.height;

let canvas = document.createElement('canvas');



let id = this.params.id

if(! id){

    id = randomString(18);

}



// Set the canvas ID

canvas.setAttribute('id'.this.params.id); 

canvas.width = width * this.params.clarity;

canvas.height = height * this.params.clarity;

canvas.style.cssText= 'position: fixed; width: 100%; height: 100%; left:0; top:0; z-index: -1; ';

body[0].appendChild(canvas);

Copy the code

Fill the canvas

  • The number of watermarks that can be displayed on x axis and Y axis should be calculated, and redundant calculation should be performed to prevent missing boundary watermarks

  • The canvas was rotated 15 degrees counterclockwise

  • Traverse x and y to draw watermarks

let canvas = document.getElementById(this.params.id);

let cxt = canvas.getContext('2d');



let redundance = 10;

let xCount = window.screen.width * this.params.clarity / this.params.size + redundance;

let yCount = window.screen.height * this.params.clarity / this.params.size + redundance;



cxt.rotate(- 15*Math.PI/180);





for(let i = 0; i < xCount; i++) {

  for(let j = 0; j < yCount; j++) {

    cxt.fillStyle = this.params.color;

    cxt.font = this.params.fontSize + ' Arial';

    cxt.fillText(this.params.text, this.params.density*(i-redundance/2), j*this.params.size); 

  }

}

Copy the code

Safety lock

Strange I cheerfully wrote the components to the boss, as a result, was ridiculed as not rigorous! What? What happened?

The killer turned out…

Students with some coding experience can easily erase the watermark through various operations, such as opening the debugging window to delete canvas or modify the style attribute of canvas.

Therefore, we also need to add a security lock to the watermark to improve the security level.

  • You can set a timer to periodically check the watermark status.
let self = this;

  window.setInterval(function(){

  let canvasDom = document.getElementById(self.params.id);            

  if(! canvasDom

|| canvasDom.style.cssText ! = ='position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; z-index: -1; ' 

|| canvasDom.width ! = = (window.screen.width * self.params.clarity)

|| canvasDom.height ! = = (window.screen.height * self.params.clarity)) {

    self.init();

  }

}, 500);

Copy the code

release

  • npm login
  • npm publish

Watermark effect 

npm i --save watermarkly

Copy the code
import Watermark from 'watermarkly';

new Watermark({

    text: 'test'

});

Copy the code

conclusion

This article has included making https://github.com/ponkans/F2E, welcome to Star, continuously updated

It is very common to write a small demand in my spare time, mainly because A few days ago I saw a small partner in the technical exchange group to ask, so I took it to share with you.

If you like my friend, please add a attention and click on it

Original recommendation:

  • Collection of dACHang front-end component library tools (PC, mobile, JS, CSS, etc.)
  • Big Front-end Advanced Node.js series P6 essential scaffolding /CI building ability
  • “Vomiting blood finishing” series For the front-end 17 k | the nuggets technical essay

Public number background reply [watermark], can obtain the source code.

Wechat search “water monster” or scan the qr code below reply “add group”, I will pull you into the technical communication group. Honestly, in this group, even if you don’t talk, just reading the chat is a kind of growth. (Ali technical experts, aobing authors, Java3y, mogujie senior front end, Ant Financial security experts, all the big names).

The water monster will also be regular original, regular with small partners to exchange experience or help read the resume. Add attention, don’t get lost, have a chance to run together 🏃 ↓↓↓