Repository: element-plus/element-plus
File: packages/components/watermark/src/useClips.ts (TypeScript)

Code before:
      ctx.drawImage(content, 0, 0, contentWidth, contentHeight)
    } else {
      // Text
      const {
        color,
        fontSize,
        fontStyle,
        fontWeight,
        fontFamily,
        textAlign,
        textBaseline,
      } = font
      const mergedFontSize = Number(fontSize) * ratio

      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`
      ctx.fillStyle = color
      ctx.textAlign = textAlign
      ctx.textBaseline = textBaseline
      const contents = isArray(content) ? content : [content]

      const argumentMetrics = ctx.measureText(contents[0])
      ctx.textBaseline = 'top'
      const topMetrics = ctx.measureText(contents[0])
      baselineOffset =
        argumentMetrics.actualBoundingBoxAscent -
        topMetrics.actualBoundingBoxAscent

      contents?.forEach((item, index) => {
        const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign]
        ctx.fillText(
          item ?? '',
          contentWidth * alignRatio + space * spaceRatio,
          index * (mergedFontSize + font.fontGap * ratio)
        )
      })
    }

    // ==================== Rotate ====================
    const angle = (Math.PI / 180) * Number(rotate)
    const maxSize = Math.max(width, height)
    const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio)

    // Copy from `ctx` and rotate
    rCtx.translate(realMaxSize / 2, realMaxSize / 2)
    rCtx.rotate(angle)
    if (contentWidth > 0 && contentHeight > 0) {
      rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2)
    }

    // Get boundary of rotated text
    function getRotatePos(x: number, y: number) {

Review comment (suggestion):
Perhaps the newly added logic could be placed inside an if statement to prevent unnecessary processing when an empty value is passed in.
```ts
if (contents[0]) {
  ...
}
```

Code after:
      ctx.drawImage(content, 0, 0, contentWidth, contentHeight)
    } else {
      // Text
      const {
        color,
        fontSize,
        fontStyle,
        fontWeight,
        fontFamily,
        textAlign,
        textBaseline,
      } = font
      const mergedFontSize = Number(fontSize) * ratio

      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`
      ctx.fillStyle = color
      ctx.textAlign = textAlign
      ctx.textBaseline = textBaseline
      const contents = isArray(content) ? content : [content]
      if (contents[0]) {
        const argumentMetrics = ctx.measureText(contents[0])
        ctx.textBaseline = 'top'
        const topMetrics = ctx.measureText(contents[0])
        baselineOffset =
          argumentMetrics.actualBoundingBoxAscent -
          topMetrics.actualBoundingBoxAscent
      }
      contents?.forEach((item, index) => {
        const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign]
        ctx.fillText(
          item ?? '',
          contentWidth * alignRatio + space * spaceRatio,
          index * (mergedFontSize + font.fontGap * ratio)
        )
      })
    }

    // ==================== Rotate ====================
    const angle = (Math.PI / 180) * Number(rotate)
    const maxSize = Math.max(width, height)
    const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio)

    // Copy from `ctx` and rotate
    rCtx.translate(realMaxSize / 2, realMaxSize / 2)
    rCtx.rotate(angle)
    if (contentWidth > 0 && contentHeight > 0) {
      rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2)
    }

    // Get boundary of rotated text
    function getRotatePos(x: number, y: number) {