Take any transparent PNG image

Get the image uploaded by the user, transfer the image file to base64 format, and display it on canvas.

<Upload.Dragger
  listType='picture-card'
  showUploadList={false}
  beforeUpload={async (file) => {
    await renderResultImg((await getBase64(file)) as string)
    return false}} > Drag to Upload avatar </ upload.dragger >Copy the code

After the output is complete, add the flag layer, then render the image, and the user can click save

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 Avatarimg.src = userAvatorUrl avatarimg.onload = () => {flag.png = '/ /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')) || '') } } }Copy the code

The effect