【React】10分钟制作生成国旗头像网站 思路同分享图片海报方案

随便拿一个透明png图片

获取用户上传图片，图片文件转base64格式，回显canvas上。

<Upload.Dragger
  listType='picture-card'
  showUploadList={false}
  beforeUpload={async (file) => {
    await renderResultImg((await getBase64(file)) as string)
    return false
  }}
>
  拖拽上传头像
</Upload.Dragger>

回显完成后添加国旗层，然后渲染图片，用户点击保存即可

 const renderResultImg = async (userAvatorUrl: string) => {
    const canvas = canvasRef.current
    const context = canvasRef.current?.getContext('2d')
    context && (context.globalCompositeOperation = 'source-over')

    let avatarImg = new Image()
    let flagImg = new Image()
    avatarImg.src = userAvatorUrl
    // 加载用户导入的图片
    avatarImg.onload = () => {
      flagImg.src = '/flag.png'
      // 顶层加国旗
      flagImg.onload = () => {
        canvas && (canvas.width = avatarImg.width)
        canvas && (canvas.height = avatarImg.height)
        canvas &&
          context?.drawImage(avatarImg, 0, 0, canvas.width, canvas.height)
        let { sx, sy, width, height } = fitSize(
          flagImg.width,
          flagImg.height,
          (canvas && canvas.width) || 0,
          (canvas && canvas.width) || 0
        )
        canvas &&
          context?.drawImage(
            flagImg,
            sx,
            sy,
            width,
            height,
            0,
            0,
            canvas.width,
            canvas.height
          )
        // canvas to jpg
        resultImgRef.current &&
          (resultImgRef.current.src =
            (canvas && canvas.toDataURL('image/png')) || '')
      }
    }
  }

效果