How to implement SDK watermarking in html5

This article focuses on "how to achieve SDK watermarking in html5", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to implement SDK watermarking in html5.

Webpage watermarking SDK, implementation idea

1. Generate watermarks with better access to current user information, such as name, nickname, ID, etc.

two。 Generate a Canvas that covers the entire window and does not affect other elements

3. You can modify font spacing, size, and color.

4. Do not rely on Jquery

5. Users need to be prevented from manually deleting this Canvas

Implementation analysis

Initial parameter

Size: font size color: font color id: canvasIdtext: text content density: spacing clarity: sharpness supportTip: text hints not supported by Canvas

Generate Canvas

Generate Canvas according to id, the canvas size is window.screen size, if there is an old Canvas, clear and regenerate.

The canvas is fixed in the visual window with a z-index of-1

Let body = document.getElementsByTagName ('body'); let canvas = document.createElement (' canvas'); canvas.style.cssText= 'position: fixed;width: 100% body height: 100% body [0] .appendChild (canvas)

Fingerprint generation algorithm

Let canvas = document.getElementById (this.params.id); let cxt = canvas.getContext ('2d'); let times = window.screen.width * this.params.clarity / this.params.density;// horizontal text filling times let heightTimes = window.screen.height * this.params.clarity * 1.5 / this.params.density;// vertical text filling times cxt.rotate (- 15*Math.PI/180) / / tilt the canvas for (let I = 0; I < times; iTunes +) {for (let j = 0; j < heightTimes; jacks +) {cxt.fillStyle = this.params.color; cxt.font = this.params.size + 'Arial'; cxt.fillText (this.params.text, this.params.density*i, j*this.params.density);}}

Prevent users from deleting

Use a timer to check the existence of fingerprints regularly.

Let self = this; window.setInterval (function () {if (! document.getElementById (self.params.id)) {self._init ();}}, 1000)

Project compilation

Compile with glup

Var gulp = require ('gulp'), uglify = require ("gulp-uglify"), babel = require ("gulp-babel"); gulp.task (' minify', function () {return gulp.src ('. / src/index.js') / / js file to be compressed .pipe (babel ()) .pipe (uglify ()) .pipe (gulp.dest ('. / dist')) / / compressed path}). At this point, I believe you have a deeper understanding of "how to implement SDK watermarking in html5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!