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

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

~~~js
// 导出函数 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 };
};
~~~

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

~~~js

import { getWatermark } from '@/utils/watermark';

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

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

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

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

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