WEB程序开发笔记
WEB程序开发笔记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>前端通过canvas给图片添加文字水印</title>
<style></style>
</head>
<body>
<p>
<img src="nba-star.jpeg" alt="nba-star" />
</p>
<script>
const image = document.querySelector("img");
const imgs = new Image();
imgs.src = "nba-star.jpeg";
imgs.crossOrigin = 'Anonymous';
imgs.onload = () => {
const width = imgs.width;
const height = imgs.height;
// 创建一个canvas并设置大小尺寸
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
// 设置宽高
canvas.width = width;
canvas.height = height;
// 绘制图片
context.drawImage(imgs, 0, 0, width, height);
// 添加文字水印
context.fillStyle = "#fff";
context.font = "30px Arial";
context.textBaseline = "bottom";
context.textAlign = "right";
context.fillText("凯里欧文", width - 10, height - 10);
// 生成图片
const baseImageUrl = canvas.toDataURL();
// 展示图片
image.src = baseImageUrl;
};
</script>
</body>
</html>
🔥BuildAdmin是一个永久免费开源，无需授权即可商业使用，且使用了流行技术栈快速创建商业级后台管理系统。
