前端生成水印
前端自动生成水印，完整代码和注释，理解，都在下方
思路为：使用canvas为图片生成水印
<!DOCTYPE html>
<html>
<head>
<title>动态添加水印示例</title>
<style>
#canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<input type="file" id="fileInput">
<br>
<canvas id="canvas"></canvas>
<script>
const fileInput = document.getElementById('fileInput');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 监听文件选择事件
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
// 读取文件数据,为reader中的 result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。
reader.readAsDataURL(file);
reader.onload = function(event) {
// 设置一个图片容器
const img = new Image();
// 加载图片完成时执行
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
// 在Canvas上绘制图片
ctx.drawImage(img, 0, 0);
// 添加水印文本
ctx.font = '20px Arial'; //字体大小 字体
ctx.fillStyle = 'grey'; //字体颜色
// 水印的内容，位置
ctx.fillText('Watermark: ' + getUserName(), canvas.width - 200, canvas.height - 20);
// 将Canvas中的图像转换为DataURL
const dataURL = canvas.toDataURL();
// 创建一个新的下载链接
const downloadLink = document.createElement('a');
downloadLink.href = dataURL;
downloadLink.download = 'watermarked_image.png';
downloadLink.innerHTML = 'Download Watermarked Image';
// 将下载链接添加到页面
document.body.appendChild(downloadLink);
}
// 设置图片源，生成的图片
img.src = event.target.result;
}
});
// 获取用户登录名称的示例函数
function getUserName() {
// 这里可以根据你的实际情况获取用户登录名称，例如从后端服务器获取或从本地存储中读取
return 'try it';
}
</script>
</body>
</html>
直接复制代码，上传你的图片，就能看到效果了。
原文地址：https://blog.csdn.net/m0_56986233/article/details/142821808
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！