This content originally appeared on Level Up Coding - Medium and was authored by Maxwell
Web watermark generation solutions
Watermark generation via canvas
Canvas compatibility
Here we use canvas to generate base64 images and check compatibility through CanIUse website, if used in mobile as well as some management systems, compatibility issues can be completely ignored.
The HTMLCanvasElement.toDataURL method returns a data URI containing a display of the image. You can use the type parameter for its type, which defaults to PNG format. The resolution of the image is 96dpi.
If the height or width of the canvas is 0, then the string “data:,” is returned. If the incoming type is not “image/png”, but the returned value starts with “data:image/png”, then the incoming type is not supported.
The specific code implementation is as follows:
The effect is as follows:
Watermark generation via SVG
SVG: (Scalable Vector Graphics) is a graphics format for describing two-dimensional vector graphics based on Extensible Markup Language (XML). SVG was developed by the W3C and is an open standard.
SVG browser compatibility
Compared to Canvas, SVG has better browser compatibility, and the way to generate watermarks using SVG is similar to that of Canvas, except that the base64Url generation method is replaced with SVG. as follows:
The effect is as follows:
Summary
Security issues can not be careless, for some sensitive web page, we can add a watermark to the viewer to warn the role of reducing the leak, even if the leak, it is possible to track the leaker.
If you are interested in my articles, you can follow me on Medium or Twitter.
- 10 Advanced TypeScript Tips for Development
- JavaScript Design Patterns : Singleton Pattern
- 8 tools and methods often used in JavaScript
- 12 Lines of JavaScript To Make You Look Like a Pro
- 8 Commonly Used JavaScript Libraries, Become a Real Master
How to Add a Watermark to Your Website with HTML Canvas was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Maxwell
Maxwell | Sciencx (2022-11-17T21:49:05+00:00) How to Add a Watermark to Your Website with HTML Canvas. Retrieved from https://www.scien.cx/2022/11/17/how-to-add-a-watermark-to-your-website-with-html-canvas/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.