Function makerQRPost

utils/makerQRPost.ts:107–223

()

  // 生成海报
  const makerQRPost = (): void => {
    const canvas = document.querySelector<HTMLCanvasElement>("#qrcodepostmaker")
    const ctx = canvas.getContext("2d")
    if (!ctx) return

    const QRCodeData = ctx.getImageData(0, 0, canvas.width, canvas.height)
    const title = document.title
    const desc = document.head.querySelector('meta[name="description"]')
      ? document.head.querySelector<HTMLMetaElement>(
          'meta[name="description"]'
        )!.content
      : ""
    const cardWidth = 360
    const lineHeight = 1.6
    const margin = 36
    const titleStyle = 'Bold 18px "Microsoft YaHei"'
    const descStyle = '16px "Microsoft YaHei"'

    const titleArray = textComputer(
      title,
      titleStyle,
      cardWidth - margin * 2,
      ctx
    )
    const descArray = textComputer(desc, descStyle, cardWidth - margin * 2, ctx)

    const cardHeight =
      margin * 2.5 +
      18 * titleArray.length * lineHeight +
      16 * descArray.length * lineHeight +
      (descArray.length ? margin / 2 : 0) +
      300

    canvas.width = cardWidth
    canvas.height = cardHeight

    const myGradient = ctx.createLinearGradient(0, 0, 0, cardHeight)
    myGradient.addColorStop(0, "#2980B9")
    myGradient.addColorStop(0.5, "#6DD5FA")
    myGradient.addColorStop(1, "#FFFFFF")

    ctx.fillStyle = myGradient
    ctx.fillRect(0, 0, cardWidth, cardHeight)
    ctx.fillStyle = "#FFFFFF"

    ctx.beginPath()
    ctx.arc(margin * 0.4, cardHeight - margin * 5, margin, 0, Math.PI * 2, true)
    ctx.arc(
      cardWidth - margin * 0.4,
      cardHeight - margin * 3,
      margin * 0.8,
      0,
      Math.PI * 2,
      true
    )
    ctx.fillRect(0, cardHeight - margin * 5, cardWidth / 2, margin * 5)
    ctx.fillRect(
      cardWidth / 2,