In order to prevent information leakage or intellectual property infringement, it is necessary to add watermarking to image documents in the world of web. According to the environment, watermark can be divided into two categories: front-end browser environment and back-end service environment.
Front-end browser watermarking:
Reduce the pressure on the server side, low safety factor of quick response, for those who master certain front-end knowledge, they can skip the watermark to obtain the source file through various SAO operations. A resource is not bound to a single user, but a resource that can be viewed by multiple users. A user-specific watermark needs to be added when each user views the resource, which is mostly used for some confidential documents or pages displaying confidential information. The purpose of the watermark is to find the responsible person when the document flows out
Backend server watermarking:
When faced with a large file dense watermark, complex or watermark, server memory, computation, request time is too long High security, unable to get the source file to the front of the watermark Applicable scenario: unique resources for one user, only need to do a deal with a copy of the original resources, store it and then without having to deal with again, the purpose of the watermark is marked on the ownership of the resources
Here are some ways to generate watermarks in the front-end browser environment.
1. Canvas generation method
Canvas has good compatibility and is a relatively reliable and mature visualization technology. However, it is relatively dependent on resolution and has congenital deficiencies in text processing. But it can be very convenient to save the result as a picture, for the need to complete the watermarking is also very suitable.
For the convenience of users, I set all implementation coordinates to top/left to facilitate the setting of X and Y.
export default class CanvasWay { constructor(watermark) { this.watermark = watermark const {width, height} = watermark this.canvas = document.createElement('canvas'); this.canvas.setAttribute('width', width); this.canvas.setAttribute('height', height); } render() { const {txt, x, y, width, height, font, color, fontSize, alpha, angle} = this.watermark const ctx = this.canvas.getContext('2d'); ctx.clearRect(0, 0, width, height); ctx.textBaseline = 'top'; ctx.textAlign = 'left' ctx.fillStyle = color; ctx.globalAlpha = alpha; ctx.font = `${fontSize}px ${font}` ctx.translate(x, y) ctx.rotate(Math.PI / 180 * angle); ctx.translate(-x, -y - fontSize) ctx.fillText(txt, x, y + fontSize); return this.canvas.toDataURL(); }}
Copy the code2. SVG generation mode
SVG is almost identical to Canvas in terms of browser compatibility, except for a few early Android versions, which are hard to find and can be completely ignored. SVG uses XML and does not depend on resolution, so SVG has an advantage when it comes to watermarking.
The text attributes x and y of SVG position the lower-left position of the text in its coordinate system (x,y). This may be different from the positioning of everyday CSS, so you need to have a dy value and set its offset.
export default class SvgWay { constructor(watermark) { this.watermark = watermark } render() { const {txt, x, y, width, height, color, font, fontSize, alpha, angle} = this.watermark const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px"> <text x="${x}px" y="${y}px" dy="${fontSize}px" text-anchor="start" stroke="${color}" stroke-opacity="${alpha}" fill="none" transform="rotate(${angle},${x} ${y})" font-weight="100" font-size="${fontSize}" font-family="${font}" > ${txt} </text> </svg>`; return `data:image/svg+xml; base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`; }}Copy the codeconclusion
Security issues can not be careless, for some sensitive content, we can use the above watermarking scheme by combination, so as to maximize the role of warning to the viewer, reduce the situation of leaks, even if the leaks, it is possible to track the leaks.