Function makerQRCodeImg

utils/makerQRPost.ts:53–250

()

}

export default function makerQRCodeImg() {
  const qrcodepostmaker = document.createElement("canvas")
  qrcodepostmaker.id = "qrcodepostmaker"
  qrcodepostmaker.style.display = "none"
  document.body.appendChild(qrcodepostmaker)

  // 文本换行处理
  const textComputer = (
    text: string,
    style: string,
    width: number,
    ctx: CanvasRenderingContext2D
  ): string[] => {
    if (text.replace(/\s/g, "").length === 0) {
      return []
    }
    ctx.font = style
    let temp = 0
    const row: string[] = []
    for (let i = 0; i <= text.length; i++) {
      if (ctx.measureText(text.substring(temp, i)).width >= width) {
        row.push(text.substring(temp, i - 1))
        temp = i - 1
      } else if (i === text.length) {
        row.push(text.substring(temp, i))
      }
    }
    return row
  }

  // 绘制文本
  const textWriter = (
    textArr: string[],
    Style: string,
    align: CanvasTextAlign,
    color: string,
    borderColor: string,
    fontSize: number,
    lineHeight: number,
    pos: Position,
    ctx: CanvasRenderingContext2D
  ): Position => {
    ctx.font = Style
    ctx.textAlign = align
    ctx.fillStyle = color
    ctx.strokeStyle = borderColor
    for (const text of textArr) {
      pos.y += fontSize * lineHeight
      ctx.fillText(text, pos.x, pos.y)
    }
    return pos
  }

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