In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-03-29 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
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!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.