html2canvas-watermark

import render, { isImage, drawLogo } from 'html2canvas-watermark'
import a from '@/assets/logo.png'

// 判断
isImage: (url: string) => { img: 是图片返回dom/不是返回url, isImg: boolean }

// 对已有canvas添加水印
drawLogo: (
  	canvas: HTMLCanvasElement;
  	// 参数如下介绍
    watertext?: string;
    options?: Partial<waterMarkProps>
    position?: Partial<DOMRect>
) => Promise<void>

render({
  // dom,(必填
  element: document.getElementById('app')!,
  // 配置 (可选
  options: {
    // 水印内容 文字或图片地址
    watertext: a,
    // 背景色
    backgroundColor: '#fff',
    // 水印配置
    waterConf: {
      // 字体样式，字体水印生效
      font: {
        color: 'red',
        size: 32,
      },
      // 透明度
      opacity: 0.5,
      // x轴间距
      gapX: 100,
      // y轴间距
      gapY: 100,
      // 铺满
      multiple: true,
      // 旋转角度
      rotate: -(20 * Math.PI) / 180,
      // 图片大小，仅在图片水印生效
      image: {
        width: 100,
        height: 100,
      },
    },
  },
  // 结束回调 (可选
  onComplete: (ca) => {
    console.log('---------', ca)
  },
})