做网站猫要做端口映射吗,四站合一网站建设公司,百度经验,卖产品怎么做网站在src/utils文件夹下新建watermark.ts#xff0c;写入以下代码块#xff0c;生成水印文件
// 导出函数 getWatermark#xff0c;它返回一个对象#xff0c;其中包含一个名为 watermark 的方法。
export const getWatermark () {const setWatermark (str: any) …在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
