1 line
7.6 KiB
Plaintext
1 line
7.6 KiB
Plaintext
|
{"version":3,"file":"useClips.mjs","names":[],"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
|