You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
13 KiB
1 line
13 KiB
{"ast":null,"code":"const FontGap = 3;\nfunction prepareCanvas(width, height, ratio = 1) {\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 return [ctx, canvas, realWidth, realHeight];\n}\nfunction useClips() {\n function getClips(content, rotate, ratio, width, height, font, gapX, gapY) {\n const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio);\n if (content instanceof HTMLImageElement) {\n ctx.drawImage(content, 0, 0, contentWidth, contentHeight);\n } else {\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 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 = Array.isArray(content) ? content : [content];\n contents == null ? void 0 : contents.forEach((item, index) => {\n ctx.fillText(item != null ? item : \"\", contentWidth / 2, index * (mergedFontSize + FontGap * ratio));\n });\n }\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 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 function getRotatePos(x, y) {\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 let left = 0;\n let right = 0;\n let top = 0;\n let bottom = 0;\n const halfWidth = contentWidth / 2;\n const halfHeight = contentHeight / 2;\n const points = [[0 - halfWidth, 0 - halfHeight], [0 + halfWidth, 0 - halfHeight], [0 + halfWidth, 0 + halfHeight], [0 - halfWidth, 0 + halfHeight]];\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 const cutLeft = left + realMaxSize / 2;\n const cutTop = top + realMaxSize / 2;\n const cutWidth = right - left;\n const cutHeight = bottom - top;\n const realGapX = gapX * ratio;\n const realGapY = gapY * ratio;\n const filledWidth = (cutWidth + realGapX) * 2;\n const filledHeight = cutHeight + realGapY;\n const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight);\n function drawImg(targetX = 0, targetY = 0) {\n fCtx.drawImage(rCanvas, cutLeft, cutTop, cutWidth, cutHeight, targetX, targetY, cutWidth, cutHeight);\n }\n drawImg();\n drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2);\n drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2);\n return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio];\n }\n return getClips;\n}\nexport { FontGap, useClips as default };","map":{"version":3,"names":["FontGap","prepareCanvas","width","height","ratio","canvas","document","createElement","ctx","getContext","realWidth","realHeight","setAttribute","save","useClips","getClips","content","rotate","font","gapX","gapY","contentWidth","contentHeight","HTMLImageElement","drawImage","color","fontSize","fontStyle","fontWeight","fontFamily","textAlign","textBaseline","mergedFontSize","Number","fillStyle","contents","Array","isArray","forEach","item","index","fillText","angle","Math","PI","maxSize","max","rCtx","rCanvas","realMaxSize","translate","getRotatePos","x","y","targetX","cos","sin","targetY","left","right","top","bottom","halfWidth","halfHeight","points","min","cutLeft","cutTop","cutWidth","cutHeight","realGapX","realGapY","filledWidth","filledHeight","fCtx","fCanvas","drawImg","toDataURL"],"sources":["../../../../../../packages/components/watermark/src/useClips.ts"],"sourcesContent":["import type { WatermarkProps } from './watermark'\n\nexport const FontGap = 3\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 ): [dataURL: string, finalWidth: number, finalHeight: number] {\n // ================= Text / Image =================\n const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(\n width,\n height,\n ratio\n )\n\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 = Array.isArray(content) ? content : [content]\n contents?.forEach((item, index) => {\n ctx.fillText(\n item ?? '',\n contentWidth / 2,\n index * (mergedFontSize + 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,\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"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |