JS利用Canvas实现文字水印和图片水印合成

作者:zkj 时间:2024-07-29 19:40:08 

介绍

给图片添加水印可以帮助网站或作者保护自己的版权,或防止内容被别人利用。给图片添加水印分为添加文字水印和添加图片水印,水印一般都做成半透明的,这样不至于影响原图内容的浏览。Canvas 图片水印合成与 Canvas 实现图片压缩 原理基本相同:

  • CanvasRenderingContext2D.drawImage(image, dx, dy, dWidth, dHeight) 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像。

  • HTMLCanvasElement.toDataURL() 方法支持导出为 base64 字符串。

文字水印

首先创建一个空的 canvas 元素,并获取其上下文。

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

获取页面上需要合成水印的 img 元素,或者根据一个 File 或 Blob 对象,创建一个空的 img 元素,将其 src 设为 File 或 Blob 对象的 URL。

设置 canvas 元素的宽高为 img 元素的宽高,清除画布,绘制图像。

canvas.width = img.width;
canvas.height = img.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

设置字体、对齐方式、旋转角度。

ctx.font = `bold ${img.height / 10}px arial`;
ctx.fillStyle = 'rgba(255, 0, 0, .2)';
ctx.textBaseline = 'bottom';
ctx.transform(1, 0.5, -0.5, 1, 0, -canvas.height / 2);

定义水印文字、水印高度,循环绘制水印。

let txt = '1234567 ';
const txtHeight = img.height / 6;
txt = Array(Math.ceil(canvas.width / ctx.measureText(txt).width) * 2).join(txt);
for (let i = 0; i < Math.ceil(canvas.height / txtHeight) * 2; i++) {
 ctx.fillText(txt, 0, i * txtHeight);
}

在页面渲染合成后的图像,释放创建的 URL 对象。

result.src = canvas.toDataURL(type);
URL.revokeObjectURL(img.src);

效果

JS利用Canvas实现文字水印和图片水印合成

图片水印

首先创建一个空的 canvas 元素,并获取其上下文。

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

获取页面上需要合成水印的 img 元素,或者根据一个 File 或 Blob 对象,创建一个空的 img 元素,将其 src 设为 File 或 Blob 对象的 URL。

设置 canvas 元素的宽高为 img 元素的宽高,清除画布,绘制图像。

canvas.width = img.width;
canvas.height = img.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

设置旋转角度,创建重复图像的模式,绘制水印。

ctx.transform(1, 0.5, -0.5, 1, 0, -canvas.height / 2);
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ctx.createPattern(imgCover, 'repeat');
ctx.fill();

在页面渲染合成后的图像,释放创建的 URL 对象。

result.src = canvas.toDataURL(type);
URL.revokeObjectURL(img.src);

效果

JS利用Canvas实现文字水印和图片水印合成

来源:https://juejin.cn/post/7167364161461026852

标签:JS,Canvas,水印
0
投稿

猜你喜欢

  • php插件功能实现方法介绍

    2023-05-30 12:28:52
  • Django处理Ajax发送的Get请求代码详解

    2023-06-29 08:40:40
  • pytorch1.0中torch.nn.Conv2d用法详解

    2023-07-17 10:53:48
  • python将字符串以utf-8格式保存在txt文件中的方法

    2023-01-10 14:04:55
  • PyTorch 随机数生成占用 CPU 过高的解决方法

    2021-09-23 09:12:31
  • js判断变量是否未定义的代码

    2023-08-16 03:43:27
  • python中doctest库实例用法

    2022-07-22 16:52:30
  • Python3 shelve对象持久存储原理详解

    2022-06-30 13:43:39
  • Python Multiprocessing多进程 使用tqdm显示进度条的实现

    2021-04-03 19:15:08
  • JavaScript解决Joseph问题

    2008-06-21 17:11:00
  • python比较两个列表是否相等的方法

    2023-04-10 06:29:18
  • Python的collections模块中的OrderedDict有序字典

    2023-06-21 00:13:52
  • python 合并文件的具体实例

    2022-03-12 03:18:26
  • python学习之panda数据分析核心支持库

    2023-11-04 17:39:29
  • 怎么才能限制SQL Server只能让指定的机器连接

    2010-07-30 13:30:00
  • MySQL中count(*)、count(1)和count(col)的区别汇总

    2024-01-23 07:13:43
  • Pycharm 创建 Django admin 用户名和密码的实例

    2021-02-10 01:46:46
  • Python深度学习之实现卷积神经网络

    2021-08-11 01:57:01
  • 用python做游戏的细节详解

    2022-02-08 05:18:39
  • 让ASP搭配MYSQL

    2009-10-04 20:30:00
  • asp之家 网络编程 m.aspxhome.com