useWatermark.ts 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import { getCurrentInstance, onBeforeUnmount, ref, Ref, shallowRef, unref } from 'vue';
  2. import { useRafThrottle } from '/@/utils/domUtils';
  3. import { addResizeListener, removeResizeListener } from '/@/utils/event';
  4. import { isDef } from '/@/utils/is';
  5. const domSymbol = Symbol('watermark-dom');
  6. export function useWatermark(
  7. appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement>
  8. ) {
  9. const func = useRafThrottle(function () {
  10. const el = unref(appendEl);
  11. if (!el) return;
  12. const { clientHeight: height, clientWidth: width } = el;
  13. updateWatermark({ height, width });
  14. });
  15. const id = domSymbol.toString();
  16. const watermarkEl = shallowRef<HTMLElement>();
  17. const clear = () => {
  18. const domId = unref(watermarkEl);
  19. watermarkEl.value = undefined;
  20. const el = unref(appendEl);
  21. if (!el) return;
  22. domId && el.removeChild(domId);
  23. removeResizeListener(el, func);
  24. };
  25. function createBase64(str: string) {
  26. const can = document.createElement('canvas');
  27. const width = 300;
  28. const height = 240;
  29. Object.assign(can, { width, height });
  30. const cans = can.getContext('2d');
  31. if (cans) {
  32. cans.rotate((-20 * Math.PI) / 120);
  33. cans.font = '15px Vedana';
  34. cans.fillStyle = 'rgba(0, 0, 0, 0.15)';
  35. cans.textAlign = 'left';
  36. cans.textBaseline = 'middle';
  37. cans.fillText(str, width / 20, height);
  38. }
  39. return can.toDataURL('image/png');
  40. }
  41. function updateWatermark(
  42. options: {
  43. width?: number;
  44. height?: number;
  45. str?: string;
  46. } = {}
  47. ) {
  48. const el = unref(watermarkEl);
  49. if (!el) return;
  50. if (isDef(options.width)) {
  51. el.style.width = `${options.width}px`;
  52. }
  53. if (isDef(options.height)) {
  54. el.style.height = `${options.height}px`;
  55. }
  56. if (isDef(options.str)) {
  57. el.style.background = `url(${createBase64(options.str)}) left top repeat`;
  58. }
  59. }
  60. const createWatermark = (str: string) => {
  61. if (unref(watermarkEl)) {
  62. updateWatermark({ str });
  63. return id;
  64. }
  65. const div = document.createElement('div');
  66. watermarkEl.value = div;
  67. div.id = id;
  68. div.style.pointerEvents = 'none';
  69. div.style.top = '0px';
  70. div.style.left = '0px';
  71. div.style.position = 'absolute';
  72. div.style.zIndex = '100000';
  73. const el = unref(appendEl);
  74. if (!el) return id;
  75. const { clientHeight: height, clientWidth: width } = el;
  76. updateWatermark({ str, width, height });
  77. el.appendChild(div);
  78. return id;
  79. };
  80. function setWatermark(str: string) {
  81. createWatermark(str);
  82. addResizeListener(document.documentElement, func);
  83. const instance = getCurrentInstance();
  84. if (instance) {
  85. onBeforeUnmount(() => {
  86. clear();
  87. });
  88. }
  89. }
  90. return { setWatermark, clear };
  91. }