前言

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

添加水印

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

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方法是异步的，我刚开始就在这上面吃过亏。
那么，有时候只是实现这么一个简单的水印不符合要求，比如，我想生成一个全背景的那种水印的图片怎么办呢，这时候看下面代码

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，在将来会不断的完善这款插件的功能，希望各位大佬有好的想法也可以提供思路给我，我们一起共同进步。

功能插件---水印插件相关推荐

wordpress图片水印插件DX-Watermark
DX-Watermark是一款功能齐全的wordpress图片水印插件,可以自动给上传的图片添加文本或者图片水印. 后台截图: 文本水印: 图片水印: 选项说明: 类型:可选择文本或图片水印两种类型, ...
发帖添加作者水印插件无法发帖问题-缺少GD库支持，php如何安装gd库-一颗优雅草科技伊凡
发帖添加作者水印插件无法发帖问题-缺少GD库支持,缺少发帖会报错 php如何安装gd库: 宝塔也可以点击进入终端执行 Linux系统直接安装: yum install php-gd* #适用于32 ...
VMware 云桌面水印插件
本插件是VMware下一款基于Horizon虚拟桌面的盲水印插件. 什么是盲水印? 它可以在Horizon虚拟桌面的屏幕上,叠加一层肉眼无法看到的"水印"图片.更重要的是,这个&q ...
WordPress图片水印插件 Easy Watermark
1.概述 WordPress图片水印插件Easy Watermark 是一款实现上传图片自动添加水印LOGO功能的高效插件.当我们在WordPress网站后台上传图片文件到媒体库时,或者在发布文章上传 ...
【追加功能】OFFICE插件管理工具重整后再上路，更好用易用。
现在使用OFFICE插件的群体越来越多,在8月份修复过的[OFFICE插件管理工具],尝试将COM加载项的插件管理进行完善. 但仍然有一小部分普通加载项的管理未能加到里面.特别是近期用户反馈到的Eas ...
jPList – 实现灵活排序和分页功能的 jQuery 插件
jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...
wps 插件_【追加功能】OFFICE插件管理工具重整后再上路，更好用易用。
现在使用OFFICE插件的群体越来越多,在8月份修复过的[OFFICE插件管理工具],尝试将COM加载项的插件管理进行完善. 但仍然有一小部分普通加载项的管理未能加到里面.特别是近期用户反馈到的Eas ...
html 水印插件,jquery图片水印插件
Img2Blob.js是一款可以为图片添加自定义水印的jquery插件.该jquery图片水印插件可以将图片转换为blob对象,然后为其添加自定义水印效果. 使用方法在页面中引入jquery和img ...
clipboard使用总结（复制文本到剪贴板功能的JavaScript插件）
1. 概述 clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件.通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.j ...

功能插件---水印插件

前言

添加水印

水印插件

功能插件---水印插件相关推荐

最新文章

热门文章