Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve watermarking in the front end of web". In daily operation, I believe many people have doubts about how to achieve watermarking in front of web. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to achieve watermarking in front of web"! Next, please follow the editor to study!

Preface

The watermarks implemented at the front end are basically insecure and can be cracked.

Watermark

Watermark is a technique that is easy to identify, is sandwiched in paper, and can pass through light to show a variety of shadows.

Realize

First create a wrap block and style it:

* {margin: 0; padding: 0;}. Wrap_common {position: relative; margin: 0 auto; width: 800px; height: 44vh; border: 1px solid rgba (0,0,0,1); background: rgba (255,255,255,1); overflow: hidden;}. Wrap_common:first-child {margin-bottom: 5vh;}

1. DIV absolute positioning

Add the watermark to wrap by overlaying layers. Let's take a look at the final result.

Dynamically obtain the length and width of wrap and calculate how many watermark blocks it can put, and set the offset value left,top of each watermark block accordingly:

Const wrap = document.querySelector ('.wrap1'); const {clientWidth, clientHeight} = wrap;const waterHeight = 100th Const waterWidth = 180X / can drop several rows and columns const [columns, rows] = [Math.ceil (clientWidth / waterWidth), Math.ceil (clientHeight / waterHeight)] for (let I = 0; I < columns; iTunes +) {for (let j = 0; j {const sin = Math.sin (Math.PI / 4.5); const cos = Math.cos (Math.PI / 4.5) Const canvas = document.createElement ('canvas') canvas.width = 200; canvas.height = 100; const ctx = canvas.getContext (' 2d'); ctx.transform (cos,-sin, sin, cos, 0Coe 0); ctx.font = '16pxhammer; ctx.fillStyle =' rgba (0Person.4)'; ctx.fillText (text, 80,140); ctx.fillText (text,-30,100); return canvas.toDataURL ('image/png')}

We can see that wrap inserts a picture of base64, and children's shoes with obsessive-compulsive disorder can be dealt with by changing it into a style tag and inserting it into body.

Change to style tag insertion:

Const style = document. CreateElement ('style'); style.type =' text/css'; style [XSS _ clean] = `.wrap2 {background-image: url (${drawWaterMark ()});} `; document.body.appendChild (style). At this point, the study on "how to implement watermarking at the web front end" is over. I hope to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.