返回

前端页面、图片、视频添加水印的自定义指令，让你的作品不会被他人盗用

前端

水印的意义：

  • 保护知识产权： 在前端页面、图片和视频中添加水印可以有效地防止他人盗用你的作品。
  • 提升品牌知名度： 在作品中添加水印可以帮助你宣传自己的品牌，提升品牌知名度。
  • 增加视觉效果： 水印还可以作为一种装饰元素，增加作品的视觉效果。

实现方法：

  1. 使用canvas创建水印：
function createWatermark(text) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  ctx.font = '16px Arial';
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
  ctx.fillText(text, 10, 50);

  return canvas.toDataURL('image/png');
}
  1. 在前端页面中添加水印：

在前端页面中添加水印可以使用 CSS 的 background-image 属性，如下所示：

body {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiBzdFJlZj0iYWRvYmU6ZGZyOmZpbGU6ZjE4NjU0OGUtMzI5ZC00NmRjLThhYzItNDU4NzBiN2Q5YTlmIj4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ID99G+0jAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAA0lJREFUeNrs3ceXFcXV5/99ClX7RqSFClCUGaQmYRNNj1b8mMj22CQrF3Ksl9v5QZu12JSwrJ/rhJWUr7nb9quS5C+qjk5oTLFstKo8c+nNfVU+oFTVsRN0cez3POc8z77rzfme7nP+c3zOA/ec/4J6upqAgMDg4KCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCoqFOf2VmVhZWVmVhZWVmVhZWVmVhZWVmVhZWVmVhZWVmVhYWVDXO69k7vvb2dmZmZmZmZmZmZmZmZmZmZmZmZmZmZmVhY0bc0m6j+Dg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4OLi5U940dHBwMDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7m9nPny8zMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMy0i+p+NkdHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR1IbN/N3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3dlh80vd3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3dzCzo+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4uLlX7Ss729vb29vb29vb29vb29vb29vb29vb29vb29vb2tjtne3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3vEvOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzszC7r+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fjCzo+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4uLi3Ti+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr62N7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3vT8p/0P+/v7+fv7+fv7+fv7+fv7+fv7+fv7+fv7+fv7+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj46P9TAAA4FvEtQpAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100px 100px;
}
  1. 在图片中添加水印：

在图片中添加水印可以使用 HTML 的 <img> 标签的 crossOrigin 属性，如下所示：

<img src="image.png" crossOrigin="anonymous" />

然后使用 JavaScript 的 drawImage() 方法将水印绘制到图片上，如下所示：

const image = document.querySelector('img');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = image.width;
canvas.height = image.height;

ctx.drawImage(image, 0, 0);

const watermark = createWatermark('你的水印文字');
ctx.drawImage(watermark, 0, 0);

image.src = canvas.toDataURL('image/png');
  1. 在视频中添加水印：

在视频中添加水印可以使用 HTML 的 <video> 标签的 crossOrigin 属性，如下所示：

<video src="video.mp4" crossOrigin="anonymous" />

然后使用 JavaScript 的 video.captureStream() 方法获取视频流，然后使用 HTML 的 <canvas> 标签的 captureStream() 方法将视频流绘制到画布上，最后使用 JavaScript 的 drawImage()