JS 如何在图片上叠加水印或蒙版以增加复杂性
发布时间：2023-03-24浏览次数：0
支持注册ChatGPT Plus的OneKey虚拟卡
绑定Apple Pay、Google Pay、支付宝和微信支付进行日常消费
注册和了解更多 ->
silver
在 JavaScript 中，可以使用 Canvas API 来在图片上叠加水印或蒙版。
以下是一个简单的例子，演示如何使用 Canvas API 在图片上添加一个水印：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Watermark example</title>
</head>
<body>
<img src="image.jpg" alt="Original image">
<canvas id="watermark"></canvas>
<script>
const canvas = document.getElementById("watermark");
const ctx = canvas.getContext("2d");
const img = document.querySelector("img");
// 将画布的大小设置为图片的大小
canvas.width = img.width;
canvas.height = img.height;
// 在画布上绘制原始图片
ctx.drawImage(img, 0, 0);
// 添加文本水印
ctx.font = "20px Arial";
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.textAlign = "center";
ctx.fillText("Watermark", canvas.width / 2, canvas.height / 2);
// 将水印叠加到原始图片上
img.src = canvas.toDataURL();
</script>
</body>
</html>
在上面的例子中，我们首先创建了一个包含原始图片和一个 Canvas 元素的 HTML 页面。然后，我们使用 Canvas API 在画布上绘制原始图片，并在画布上叠加了一个文本水印。最后，我们将画布的内容转换为 base64 编码的图片数据，并将其设置为原始图片的源，以便在页面上显示叠加水印后的图片。
类似的，你也可以使用 Canvas API 创建一个蒙版，然后将其叠加到原始图片上以增加复杂性。
扫描二维码查看更多内容