preface

As one of the means to protect intellectual property rights, watermarking has been seen everywhere in our daily life, such as Baidu pictures, ZF official website reports and ubiquitous posters. Watermarking is so close to our life, as a developer, the implementation of watermarking is worth exploring!

The body of the

There are no more than two ways to generate watermark: program synthesis and PS. Strictly speaking, PS is also one of the means of procedural composition (layer composition), this article focuses on how to use procedural composition means to add watermarks.

1. Classification of watermarking synthesis

Here only elaborates and this article content related classification, other Angle classification please self baidu!

From the source of material classification: picture synthesis, graphic synthesis and no picture synthesis.

From the front-end technology means: Canvas, DIV mask and directly set the background picture.

2. Watermarking front-end synthesis technology

Because it is too simple to set the background image directly, this section only describes the principle of canvas and DIV mask to realize the graph composition, text and text composition and no picture composition.

2.1 Canvas Watermarking synthesis principle

Use canvas-related apis: drawImage, toDataURL, and fillText. DrawImage can draw an image to canvas, toDataURL can convert canvas to base64 image, and fillText can add text to the image. Example code is as follows:

async function compseImages(image1, image2){ return new Promise((resolve, reject) => { const canvas = document.createElement("canvas"); canvas.width = 700; canvas.height = 700; const context = canvas.getContext("2d"); context.rect(0 , 0 , canvas.width , canvas.height); context.fillStyle = "#fff"; context.fill(); const myImage = new Image(); myImage.src = image1; Myimage.crossorigin = 'Anonymous'; myImage.onerror = (e) => { reject(e)} myImage.onload = () => { context.drawImage(myImage , 0 , 0 , 700 , 700); context.font = "60px Courier New"; Context. FillText (" I am the text ",350,450); var myImage2 = new Image(); myImage2.src = image2; Myimage2. crossOrigin = 'Anonymous'; myimage2. crossOrigin = 'Anonymous'; myImage2.onerror = (e) => { reject(e) } myImage2.onload = () => { context.drawImage(myImage2 , 175 , 175 , 225 , 225); resolve(canvas.toDataURL("image/jpeg")); }}})}Copy the code

The code above just merges two images and adds a paragraph of text. Achieving watermark effect is believed to be not difficult for the development of children’s shoes! Github already has a watermarking tool using this principle, see warehouse address for details.

2.2 Principles of div mask Watermarking synthesis

This scheme is suitable for text and text synthesis and no picture synthesis. There are two concrete implementations: plain div and shadowDom. ShadowDom is recommended for style encapsulation. By the way, Google removed ::shadow and /deep/ in October 2017, see the link. Currently, external styles can only be interfered with by the host element setting inheritable properties. In short, you can use shadowDom without worrying about style contamination as long as the global style is set properly. Example code for setting watermarks using shadowDom is as follows:

// index.html <div class="content"> <div id="watermark" style="pointer-events: none! important"></div> </div> <script> const ele = document.querySelector('#watermark') if (typeof ele .attachShadow === 'function') {// Create shadowRoot if the element supports shadowRoot otherwise use normal div shadowRoot = ele. attachShadow({mode: 'open' }) } else { shadowRoot = ele } const textEl = document.createElement('div') const textNode = Document.createtextnode (' watermark ') textel.append (textNode) textel.style. width='200px' textel.style. height='200px' TextEl. Style. FontSize = '20 px textEl. Style. The opacity =' 0.5 'textEl. The style.css. Transform =' rotate (15 deg) ' textEl.style['user-slect']='none' shadowRoot.append(textEl) </script>Copy the code

The above code only adds one watermark, adding regular or irregular watermarks needs to be processed in the cycle, and the watermark line needs to be calculated according to the parent element area and the width and height of the watermark, so as to achieve the effect of spreading the whole screen. Similarly, Github already has a watermarking tool that uses this principle, see warehouse address for details.

3 Result Evaluation

The watermark generated by front-end technology can be erased easily, such as deleting background images or deleting DOM nodes. Or the use of PDF or pictures of the way to display the content can be the most likely to avoid infringement! Welcome to visit the original link!