element-plus/es/components/watermark/src/useClips.mjs.map

A Component Library for Vue 3

{"version":3,"file":"useClips.mjs","sources":["../../../../../../packages/components/watermark/src/useClips.ts"],"sourcesContent":["import { isArray } from '@element-plus/utils'\n\nimport type { WatermarkProps } from './watermark'\n\n// [alignRatio, spaceRatio]\nconst TEXT_ALIGN_RATIO_MAP = {\n  left: [0, 0.5],\n  start: [0, 0.5],\n  center: [0.5, 0],\n  right: [1, -0.5],\n  end: [1, -0.5],\n} as const\n\nfunction prepareCanvas(\n  width: number,\n  height: number,\n  ratio = 1\n): [\n  ctx: CanvasRenderingContext2D,\n  canvas: HTMLCanvasElement,\n  realWidth: number,\n  realHeight: number,\n] {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')!\n  const realWidth = width * ratio\n  const realHeight = height * ratio\n  canvas.setAttribute('width', `${realWidth}px`)\n  canvas.setAttribute('height', `${realHeight}px`)\n  ctx.save()\n\n  return [ctx, canvas, realWidth, realHeight]\n}\n\n/**\n * Get the clips of text content.\n * This is a lazy hook function since SSR no need this\n */\nexport default function useClips() {\n  // Get single clips\n  function getClips(\n    content: NonNullable<WatermarkProps['content']> | HTMLImageElement,\n    rotate: number,\n    ratio: number,\n    width: number,\n    height: number,\n    font: Required<NonNullable<WatermarkProps['font']>>,\n    gapX: number,\n    gapY: number,\n    space: number\n  ): [dataURL: string, finalWidth: number, finalHeight: number] {\n    // ================= Text / Image =================\n    const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(\n      width,\n      height,\n      ratio\n    )\n    let baselineOffset = 0\n    if (content instanceof HTMLImageElement) {\n      // Image\n      ctx.drawImage(content, 0, 0, contentWidth, contentHeight)\n    } else {\n      // Text\n      const {\n        color,\n        fontSize,\n        fontStyle,\n        fontWeight,\n        fontFamily,\n        textAlign,\n        textBaseline,\n      } = font\n      const mergedFontSize = Number(fontSize) * ratio\n\n      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`\n      ctx.fillStyle = color\n      ctx.textAlign = textAlign\n      ctx.textBaseline = textBaseline\n      const contents = isArray(content) ? content : [content]\n      if (textBaseline !== 'top' && contents[0]) {\n        const argumentMetrics = ctx.measureText(contents[0])\n        ctx.textBaseline = 'top'\n        const topMetrics = ctx.measureText(contents[0])\n        baselineOffset =\n          argumentMetrics.actualBoundingBoxAscent -\n          topMetrics.actualBoundingBoxAscent\n      }\n      contents?.forEach((item, index) => {\n        const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign]\n        ctx.fillText(\n          item ?? '',\n          contentWidth * alignRatio + space * spaceRatio,\n          index * (mergedFontSize + font.fontGap * ratio)\n        )\n      })\n    }\n\n    // ==================== Rotate ====================\n    const angle = (Math.PI / 180) * Number(rotate)\n    const maxSize = Math.max(width, height)\n    const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio)\n\n    // Copy from `ctx` and rotate\n    rCtx.translate(realMaxSize / 2, realMaxSize / 2)\n    rCtx.rotate(angle)\n    if (contentWidth > 0 && contentHeight > 0) {\n      rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2)\n    }\n\n    // Get boundary of rotated text\n    function getRotatePos(x: number, y: number) {\n      const targetX = x * Math.cos(angle) - y * Math.sin(angle)\n      const targetY = x * Math.sin(angle) + y * Math.cos(angle)\n      return [targetX, targetY]\n    }\n\n    let left = 0\n    let right = 0\n    let top = 0\n    let bottom = 0\n\n    const halfWidth = contentWidth / 2\n    const halfHeight = contentHeight / 2\n    const points = [\n      [0 - halfWidth, 0 - halfHeight],\n      [0 + halfWidth, 0 - halfHeight],\n      [0 + halfWidth, 0 + halfHeight],\n      [0 - halfWidth, 0 + halfHeight],\n    ]\n    points.forEach(([x, y]) => {\n      const [targetX, targetY] = getRotatePos(x, y)\n      left = Math.min(left, targetX)\n      right = Math.max(right, targetX)\n      top = Math.min(top, targetY)\n      bottom = Math.max(bottom, targetY)\n    })\n\n    const cutLeft = left + realMaxSize / 2\n    const cutTop = top + realMaxSize / 2\n    const cutWidth = right - left\n    const cutHeight = bottom - top\n\n    // ================ Fill Alternate ================\n    const realGapX = gapX * ratio\n    const realGapY = gapY * ratio\n    const filledWidth = (cutWidth + realGapX) * 2\n    const filledHeight = cutHeight + realGapY\n\n    const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight)\n\n    function drawImg(targetX = 0, targetY = 0) {\n      fCtx.drawImage(\n        rCanvas,\n        cutLeft,\n        cutTop,\n        cutWidth,\n        cutHeight,\n        targetX,\n        targetY + baselineOffset,\n        cutWidth,\n        cutHeight\n      )\n    }\n    drawImg()\n    drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2)\n    drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2)\n\n    return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio]\n  }\n\n  return getClips\n}\n"],"names":[],"mappings":"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"}