项目中预览图片时，添加水印，浏览器禁止右键功能、前端禁止直接获取图片地址。（Vue3、TS、canvas）

在src/utils文件夹下新建watermark.ts，写入以下代码块，生成水印文件

// 导出函数 getWatermark，它返回一个对象，其中包含一个名为 watermark 的方法。
export const getWatermark = () => {const setWatermark = (str: any) => {const id = '1.23456789.123456789';if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id)!);}// 1.创建一个 <canvas> 元素，用于绘制水印。const can = document.createElement('canvas');// 2.设置 <canvas> 元素的宽度和高度为 160 像素和 120 像素。can.width = 160;can.height = 120;// 3.获取 2D 绘图上下文对象 cans。const cans = can.getContext('2d')!;// 4.通过旋转角度将绘图上下文对象旋转 -15 度。cans.rotate((-15 * Math.PI) / 180);// 5.设置绘图字体为 '18px Vedana'。cans.font = '18px Vedana';// 6.设置填充绘图颜色为 'rgba(200, 200, 200, 0.40)'。cans.fillStyle = 'rgba(200, 200, 200, 0.40)';// 7.设置文本对齐方式为左对齐。cans.textAlign = 'left';// 8.在画布上绘制水印文本，位置为 (can.width / 8, can.height / 2)。cans.fillText(str, can.width / 8, can.height / 2);// 9.创建一个 <div> 元素，用于包裹水印。const div = document.createElement('div');// 10.设置 <div> 元素的属性，包括 id、pointerEvents、top、left、position、zIndex、width 和 height。div.id = id;div.style.pointerEvents = 'none';div.style.top = '30px';div.style.left = '0px';div.style.position = 'fixed';div.style.zIndex = '100000';div.style.width = document.documentElement.clientWidth + 'px';div.style.height = document.documentElement.clientHeight + 'px';// 11.将 <div> 元素的背景设置为生成的水印图像。div.style.background ='url(' + can.toDataURL('image/png') + ') left top repeat';// 12.将 <div> 元素添加到 <body> 元素中。document.body.appendChild(div);// 13.返回水印的 id。return id;};// 14.定义内部函数watermark，接受一个参数 str，代表水印文本。这个函数的作用是调用 setWatermark 方法创建水印，并定时检查水印是否存在，如果不存在则重新创建。当窗口大小改变时，也会重新创建水印。const watermark = (str: string) => {let id = setWatermark(str);setInterval(() => {if (document.getElementById(id) === null) {id = setWatermark(str);}}, 500);window.onresize = () => {setWatermark(str);};};// 15.函数 getWatermark 返回一个对象，其中包含一个属性 watermark，它的值是内部函数 watermark。这样，当调用 getWatermark().watermark 时，实际上是调用了内部函数 watermark。return { watermark };
};

引入getWatermark函数，进行使用，示例代码如下：

import { getWatermark } from '@/utils/watermark';const { watermark } = getWatermark();
// 打开图片进行预览和关闭预览时
const previewChange = () => {viewFlag.value = !viewFlag.value;if (viewFlag.value) { // 打开预览watermark('水印水印水印'); // 水印} else { // 关闭预览watermark('');}};

禁止浏览器右键下载预览图片，示例代码如下：

document.oncontextmenu = function () {// 禁止右键功能return false;
};

所以上面示例代码可整合为：

const previewChange = () => {viewFlag.value = !viewFlag.value;if (viewFlag.value) { // 打开预览watermark('水印水印水印'); // 水印document.oncontextmenu = function () {//禁止右键功能return false;};} else { // 关闭预览document.oncontextmenu = function () {return true;};watermark('');}};

防止使用F12打开控制台，所以获取图片地址方式为：前端根据数据库存储的图片路径，获取路径后到后端服务器上获取图片再到前端展示。

src = https://192.xxx.xx.xx:0000/api/showImg?filePath=/home/uploadfiles/pit/1234567890abcdefghijklmn

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/782972.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

项目中预览图片时，添加水印，浏览器禁止右键功能、前端禁止直接获取图片地址。（Vue3、TS、canvas）

相关文章

Java基础知识总结（29）

flutter生成二维码并截图保存到图库

瑞吉外卖实战学习--8、人员禁用和启用

【Consul】Linux安装Consul保姆级教程

25Ramdisk 启动模式简介

CKS之安全沙箱运行容器：gVisor

Stable Diffusion 推荐硬件配置和本地化布署

从输入url到页面展示的过程

杰发科技——Jlink插件使用

热烈祝贺阿里云PolarDB登顶2024最新一期中国数据库流行榜

【Review】小米汽车发布会

springcloud第4季远程调用openfegin的介绍4

01-XML-01认识XML

An Interview

C++—vector的介绍及使用 vector的模拟实现

20240323-1-条件随机场面试题CRF

【C语言】贪吃蛇【附源码】

JQuery的attr（）属性和JS的属性的方法

Unity 基于Rigidbody2D模块的角色移动

最短路径——Floyd算法、Dijkstra算法（未完...）