在前端开发中，经常需要给网页或者图片添加水印以保护版权或者防止盗用。本文将介绍两种前端水印生成方案：网页水印和图片水印，并提供详细的实现方法和示例代码。
网页水印
网页水印是指在网页上添加文字或者图片等形式的水印，常见于论坛帖子、证书、合同、图片展示等场景。下面是一个简单的实现示例。
实现方法
- 在 CSS 中定义水印样式。
-- -------------------- ---- ------- ---------- - --------- ------ -------- ----- --------------- ----- -------- ---- ---------- ----- ------ ----- ---------- --------------- -
- 在 HTML 中插入水印元素并设置内容。
<div class="watermark">My Watermark</div>
- 使用 JavaScript 在滚动时更新水印位置。
window.addEventListener('scroll', function() {
var watermark = document.querySelector('.watermark');
watermark.style.left = window.pageXOffset + 'px';
watermark.style.top = window.pageYOffset + 'px';
});示例代码
-- -------------------- ---- -------
--------- -----
------
------
-------------- -----------------
------ ----------------
---------- -
--------- ------
-------- -----
--------------- -----
-------- ----
---------- -----
------ -----
---------- ---------------
-
--------
-------
------
---- -------------------- ---------------
------- -----------------------
--------------------------------- ---------- -
--- --------- - -------------------------------------
-------------------- - ------------------ - -----
------------------- - ------------------ - -----
---
---------
-------
-------图片水印
图片水印是指在图片上添加透明的文字或者图形，用于标识图片来源或者版权信息。下面是一个简单的实现示例。
实现方法
- 使用 Canvas API 在图片上绘制水印。
-- -------------------- ---- ------- --- ------ - --------------------------------- --- --- - ------------------------ --- --- - --- -------- ---------- - ---------- - ------------ - ---------- ------------- - ----------- ------------------ -- --- -------- - ----- ------- ------------- - ---------- ---- ---- ------ ---------------- ----------- --- ---- --- ------------ - ------------------- -- -- ------------ - ------- - --------------
- 将 Canvas 中的图片转换为 Data URL，并使用该 URL 替换原始图片。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------------ -----------------
-------
------
---- ---------- ----------------- --
------- -----------------------
--- ------ - ---------------------------------
--- --- - ------------------------
--- --- - --- --------
---------- - ---------- -
------------ - ----------
------------- - -----------
------------------ -- ---
-------- - ----- -------
------------- - ---------- ---- ---- ------
---------------- ----------- --- ----
--- ------------ - -------------------
------------------------------------ - -------------
--
------- - --------------
---------
-------
-------结论
本文介绍了前端水印生成方案：网页水印和图片水印，并提供了详细的实现方法和示例代码。在实际开发中，可以根据需求选择合适的方案来保护版权或
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36624