用html5写一个给照片添加水印的代码
时间: 2024-03-06 15:50:56 浏览: 17
要在 HTML5 中给照片添加水印,可以使用 Canvas API 和 CSS3 的 `::before` 伪元素来实现。以下是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>添加水印</title>
<style type="text/css">
#canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#watermark::before {
content: "Watermark";
font-size: 2em;
color: rgba(255, 255, 255, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
z-index: 1;
}
</style>
</head>
<body>
<img id="photo" src="photo.jpg">
<canvas id="canvas"></canvas>
<div id="watermark"></div>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('canvas');
var photo = document.getElementById('photo');
var watermark = document.getElementById('watermark');
canvas.width = photo.width;
canvas.height = photo.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(photo, 0, 0);
ctx.font = "bold 30px Arial";
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.rotate(-45 * Math.PI / 180);
ctx.fillText("Watermark", -canvas.height/2, canvas.width/2);
watermark.style.width = photo.width + "px";
watermark.style.height = photo.height + "px";
}
</script>
</body>
</html>
```
上面的代码中,我们首先在页面中添加一个 `img` 元素,它的 `src` 属性指向要添加水印的照片。然后,我们添加一个 `canvas` 元素和一个 `div` 元素,分别用于绘制水印和显示水印文本。
在 JavaScript 中,我们首先获取 `canvas`、`photo` 和 `watermark` 元素,然后将 `canvas` 的宽度和高度设置为 `photo` 的宽度和高度,这样它就可以完全覆盖照片。接着,我们使用 `getContext` 方法获取 `canvas` 的 2D 渲染上下文对象 `ctx`,然后使用 `drawImage` 方法将照片绘制到 `canvas` 上。
接下来,我们设置水印的样式,包括字体大小、颜色、位置和旋转角度等。这里我们将水印文本绘制在 `canvas` 上,并将它旋转 `-45deg`,这样它就可以呈现倾斜的效果。最后,我们将水印文本的样式设置为 `::before` 伪元素的样式,这样它就可以显示在照片上方。
最后,我们在 `watermark` 元素的样式中将它的宽度和高度都设置为 `photo` 的宽度和高度,这样它就可以与照片完全重合。
希望这个例子能够帮助您实现在 HTML5 中给照片添加水印的效果。