利用canvas给图片添加水印
warning:
这篇文章距离上次修改已过196天，其中的内容可能已经有所变动。
要在图片上添加水印，可以使用HTML5的canvas元素。以下是一个简单的示例，演示如何在图片上添加文字水印：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 加载图片
var img = new Image();
img.onload = function() {
// 在图片加载完毕后，绘制图片
ctx.drawImage(img, 0, 0);
// 添加水印文字
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色文字
ctx.fillText('Watermark', 50, 100); // 在图片上的坐标(50,100)处添加水印文字
};
img.src = 'path_to_your_image.jpg'; // 替换为你的图片路径
</script>
</body>
</html>在这个例子中，我们首先创建了一个canvas元素，然后使用JavaScript加载一个图片。图片加载完成后，我们在canvas上绘制这个图片，然后使用fillText方法添加水印文字。可以通过调整fillStyle属性来改变水印的颜色和透明度，以及通过font属性来调整文字的大小和字体。
评论已关闭