vue2.js添加水印

最新推荐文章于 2025-02-14 11:29:15 发布

韩小浪~~

最新推荐文章于 2025-02-14 11:29:15 发布

阅读量717

点赞数 10

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/hhbbeijing/article/details/134670499

版权

文章介绍了如何在JavaScript中通过HTML5的CanvasAPI创建一个函数addWaterMark，用于在图片上动态生成并设置透明度的水印。该方法在Vue组件中被应用，可以根据权限动态控制水印的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过canvas生成水印图片

function addWaterMark(str) {
    let ctx = document.createElement("canvas");
    ctx.width = 900;
    ctx.height = 450;
    ctx.style.display = "none";
    let cans = ctx.getContext("2d");
    cans.rotate((-20 * Math.PI) / 180);
    cans.font = "18px SimHei";
    cans.fillStyle = "rgba(46, 52, 64, 0.15)";
    cans.textAlign = "center";
    cans.textBaseline = "bottom";
    cans.fillText(str, 350, 350);
    cans.save();
    return ctx.toDataURL();
}

main.vue 添加水印

new Promise((resolve) => {
    const beforeEle = document.getElementById('watermark__wrapper');
    const parentEle = document.body;
    // 移除原先的
    if(beforeEle) parentEle.removeChild(beforeEle);
    const url = addWaterMark(“水印”);
	const ele = document.createElement("div");
    ele.id = 'watermark__wrapper';
	ele.style = `position: fixed; inset: 0; z-index: 2001; pointer-events: none; user-select: none; background-image: url(${url}); display: ${this.authority === 2 && res.data.watermark === 1 ? 'block' : 'none'};`;
	parentEle.appendChild(ele);
	resolve();
})