功能插件---水印插件前言添加水印水印插件

118 阅读 0 评论 78 点赞

我是靠谱客的博主无奈大树，这篇文章主要介绍功能插件---水印插件前言添加水印水印插件，现在分享给大家，希望可以做个参考。

前言

还就没写博客了，最近实在是太忙了，马上还要做毕业设计和论文，今天抽时间写一写关于添加水印的问题吧

添加水印

如果只是想简单的给图片添加一个水印，其实很简单，只需要使用canvas，将需要的图片画出来之后再画上文字，最后导出成为base64格式的图片即可

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const parentImg = new Image()
parentImg.src = imgSrc
parentImg.onload = () => {
let canvas = document.createElement('canvas')
canvas.setAttribute('width', 500);
canvas.setAttribute('height', 500);
let ctx = canvas.getContext("2d");
let base64Url = ''
// 先把图片绘制到canvas上
ctx.drawImage(parentImg, 0, 0, 500, 500);
// 绘制水印到canvas上
ctx.fillText('这是水印', 0, 0)
// 将图片生成base64编码
base64Url = canvas.toDataURL();
}

这样就可以实现一个很简单的添加水印功能，最后会生成一个base64格式的图片，想在哪里使用就在哪里使用，不过需要注意的是图片的onload方法是异步的，我刚开始就在这上面吃过亏。
那么，有时候只是实现这么一个简单的水印不符合要求，比如，我想生成一个全背景的那种水印的图片怎么办呢，这时候看下面代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const parentImg = new Image()
parentImg.src = imgSrc
parentImg.onload = () => {
let canvas = document.createElement('canvas')
canvas.setAttribute('width', 500);
canvas.setAttribute('height', 500);
let ctx = canvas.getContext("2d");
let base64Url = ''
// 先把图片绘制到canvas上
ctx.drawImage(parentImg, 0, 0, imgWidth , imgHeight);
// 绘制水印到canvas上
// 水印的行数
const row = Math.ceil(imgWidth / 200)
// 水印的列数
const col = Math.ceil(imgHeight / 2)
// 循环平铺添加水印
for(let i = 0; i < row; i++){
for(let j = 0; j < col; j++){
ctx.fillText('这是水印', 200 * i, 100 * j + 1)
}
}
base64Url = canvas.toDataURL();
}

以上代码可以生成一个全背景的水印。但是有可能还会有其他需求，那么该怎么办呢，比如：我可以随意拖动这个水印，让它在图片的任意地方，这该怎么办呢？或者是，我想让拖动添加的水印可以适合任意图片，这又该怎么办呢？

水印插件

这是我在根据我最近开发的一个项目的需求做出来的满足这些条件的插件，支持拖拽水印在图片的任何地方，只需要调用一个函数即可生成，今天把它分享给大家，如果在项目中需要，可以使用npm命令下载：npm i add-move-water-picture 就可以将这款插件下载到项目中使用，github地址：https://github.com/caohongyu-crypto/add-move-water-picture，在将来会不断的完善这款插件的功能，希望各位大佬有好的想法也可以提供思路给我，我们一起共同进步。