150人参与 • 2025-02-14 • Javascript
在前端开发中，给网页或图像添加水印是一项常见的需求。以下是几种实现水印的方法，包括其优缺点的讲解：
通过将水印作为背景图片添加到网页的容器中。
实现步骤：
.watermark-container {
position: relative;
}
.watermark-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('watermark.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.2;
pointer-events: none; /* 确保水印不影响用户操作 */
}
优点：
缺点：
通过 canvas 元素动态绘制水印，适用于图像或者页面上的任何元素。
实现步骤：
<canvas id="watermarkcanvas"></canvas>
<img id="targetimage" src="example.jpg" alt="example image" />
<script>
const canvas = document.getelementbyid('watermarkcanvas');
const img = document.getelementbyid('targetimage');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getcontext('2d');
ctx.drawimage(img, 0, 0);
// 设置水印样式
ctx.font = "30px arial";
ctx.fillstyle = "rgba(255, 255, 255, 0.5)";
ctx.textalign = "center";
ctx.textbaseline = "middle";
// 在图像上绘制水印
ctx.filltext("watermark", canvas.width / 2, canvas.height / 2);
</script>
优点：
canvas 图像中，不易被移除。缺点：
通过使用 svg 元素来实现水印，可以在矢量图形上显示水印，且水印可以缩放而不会失真。
实现步骤：
<div class="watermark-container">
<img src="example.jpg" alt="example image">
<svg class="watermark" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<text x="50%" y="50%" fill="rgba(255, 255, 255, 0.3)" font-size="40" text-anchor="middle" dominant-baseline="middle" transform="rotate(-30, 50, 50)">
watermark
</text>
</svg>
</div>
优点：
缺点：
借助 javascript 图像处理库，如fabric.js，可以实现复杂的水印效果。
实现步骤：
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.6.0/fabric.min.js"></script>
<script>
const canvas = new fabric.canvas('canvas');
fabric.image.fromurl('example.jpg', function(img) {
canvas.setwidth(img.width);
canvas.setheight(img.height);
canvas.add(img);
const watermark = new fabric.text('watermark', {
left: img.width / 2,
top: img.height / 2,
fontsize: 40,
fill: 'rgba(255, 255, 255, 0.5)',
angle: -30
});
canvas.add(watermark);
});
</script>
优点：
缺点：
直接在页面上通过 dom 元素叠加的方式实现水印。
实现步骤：
<div class="watermark-container">
<img src="example.jpg" alt="example image">
<div class="watermark">watermark</div>
</div>
<style>
.watermark-container {
position: relative;
}
.watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: 40px;
color: rgba(255, 255, 255, 0.5);
pointer-events: none;
}
</style>
优点：
缺点：
前端通过请求后端 api，由后端生成带水印的图片并返回到前端显示。
优点：
缺点：
你可以根据具体的需求和性能考虑，选择最适合的实现方式。
到此这篇关于前端实现水印功能的几种方法及优缺点的文章就介绍到这了,更多相关前端实现水印功能内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
您想发表意见！！点此发布评论
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。
发表评论