menduner/src/views/recruit/components/jobFairEntShare/index.vue

<template>
	<canvas ref="shareCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>

	<Loading :visible="loading" />
</template>

<script setup>
import { ref, watch } from 'vue'
import { getJobAdvertisedShareQrcode } from '@/api/position'
import { saveShareQuery } from '@/api/recruit/personal/jobFair'

const emit = defineEmits(['success'])
const props = defineProps({
  canvasWidth: {
    type: Number,
    default: 540
  },
  canvasHeight: {
    type: Number,
    default: 788
  },
	show: Boolean,
	enterpriseName: String,
	logoUrl: String,
	positionList: Array,
	jobFairId: [String, Number],
	enterpriseId: [String, Number],
	bgImg: String,
  backgroundColor: String
})

const loading = ref(false)
const shareCanvas = ref(null)
const imgSrc = ref('')

const drawCanvas = () => {
  loading.value = true

  const canvas = shareCanvas.value
  const ctx = canvas.getContext('2d')
  const img = new Image()
  img.crossOrigin = 'anonymous'
  img.onload = async () => {
    //清空画布
    ctx.clearRect(0, 0, props.canvasWidth, props.canvasHeight)

    // 设置背景图片
    ctx.drawImage(img, 0, 0, props.canvasWidth, props.canvasHeight)

    // 分享二维码
    const secondImg = new Image()
    secondImg.crossOrigin = 'anonymous'
    secondImg.onload = () => {
      // 分享二维码
      ctx.drawImage(secondImg, 80, 550, 110, 110)

      ctx.font = 'bold 18px Arial'
      ctx.fillStyle = '#000'
      ctx.fillText('海量职位火热招聘中', 280, 605)

      ctx.font = '15px Arial'
      ctx.fillStyle = '#999'
      ctx.fillText('长按图片识别二维码', 290, 625)

      const thirdImg = new Image()
      thirdImg.crossOrigin = 'anonymous'
      thirdImg.onload = () => {
        // 企业头像
        ctx.save()
        const secondImgWidth = 120
        const secondImgHeight = 120
        const x = (canvas.width - secondImgWidth) / 2
        const y = canvas.height - secondImgHeight - 460
        
        // 设置边框样式
        ctx.strokeStyle = '#E1E4E9'
        ctx.lineWidth = 1

        // 绘制圆角矩形路径
        ctx.beginPath()
        const logoRadius = 4
        ctx.moveTo(x + logoRadius, y)
        ctx.lineTo(x + secondImgWidth - logoRadius, y)
        ctx.quadraticCurveTo(x + secondImgWidth, y, x + secondImgWidth, y + logoRadius)
        ctx.lineTo(x + secondImgWidth, y + secondImgHeight - logoRadius)
        ctx.quadraticCurveTo(x + secondImgWidth, y + secondImgHeight, x + secondImgWidth - logoRadius, y + secondImgHeight)
        ctx.lineTo(x + logoRadius, y + secondImgHeight)
        ctx.quadraticCurveTo(x, y + secondImgHeight, x, y + secondImgHeight - logoRadius)
        ctx.lineTo(x, y + logoRadius)
        ctx.quadraticCurveTo(x, y, x + logoRadius, y)
        ctx.closePath()
        ctx.clip()
        ctx.drawImage(thirdImg, x, y, secondImgWidth, secondImgHeight)
        // 绘制边框
        ctx.stroke()
        ctx.restore()

        // 企业名称
        const maxTextWidth = 400
        const text = props.enterpriseName
        const fontStyle = 'bold 24px Arial'
        ctx.font = fontStyle
        let truncatedText = text
        while (ctx.measureText(truncatedText + '...').width > maxTextWidth && truncatedText.length > 0) {
          truncatedText = truncatedText.slice(0, -1)
        }
        if (truncatedText !== text) truncatedText += '...'
        const textX = x + (secondImgWidth - ctx.measureText(truncatedText).width) / 2
        const textY = y + secondImgHeight + 30
        ctx.fillStyle = '#000'
        ctx.fillText(truncatedText, textX, textY)

        // 职位标签
        const tagPaddingLeftRight = 20
        const tagPaddingTopBottom = 10
        const tagRadius = 8
        const tagSpacing = 22
        let tagY = textY + tagSpacing + 10
        props.positionList.forEach((tag) => {
          let truncatedTag = tag
          ctx.font = '18px Arial' // 绘制前设置字体，否则tagWidth受前面的font fontStyle影响
          
          while (ctx.measureText(truncatedTag + '...').width > maxTextWidth - 2 * tagPaddingLeftRight && truncatedTag.length > 0) {
            truncatedTag = truncatedTag.slice(0, -1)
          }
          if (truncatedTag !== tag) truncatedTag += '...'

          const tagWidth = ctx.measureText(truncatedTag).width + 2 * tagPaddingLeftRight
          const tagX = x + (secondImgWidth - tagWidth) / 2

          ctx.fillStyle = '#00B760'
          ctx.beginPath()
          ctx.moveTo(tagX + tagRadius, tagY)
          ctx.lineTo(tagX + tagWidth - tagRadius, tagY)
          ctx.quadraticCurveTo(tagX + tagWidth, tagY, tagX + tagWidth, tagY + tagRadius)
          ctx.lineTo(tagX + tagWidth, tagY + tagPaddingTopBottom * 2)
          ctx.quadraticCurveTo(tagX + tagWidth, tagY + tagPaddingTopBottom * 2 + tagRadius, tagX + tagWidth - tagRadius, tagY + tagPaddingTopBottom * 2 + tagRadius)
          ctx.lineTo(tagX + tagRadius, tagY + tagPaddingTopBottom * 2 + tagRadius)
          ctx.quadraticCurveTo(tagX, tagY + tagPaddingTopBottom * 2 + tagRadius, tagX, tagY + tagPaddingTopBottom * 2)
          ctx.lineTo(tagX, tagY + tagRadius);
          ctx.quadraticCurveTo(tagX, tagY, tagX + tagRadius, tagY)
          ctx.closePath()
          ctx.fill()

          ctx.fillStyle = '#fff'
          ctx.fillText(truncatedTag, tagX + tagPaddingLeftRight, tagY + tagPaddingTopBottom + 10)

          tagY += tagPaddingTopBottom * 2 + tagSpacing
        })

        imgSrc.value = canvas.toDataURL('image/png')
        loading.value = false
				emit('success', imgSrc.value)
      }
      thirdImg.src = props.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'
    }
    
    // 保存分享参数
    const params = {
      jobFairId: props.jobFairId,
      enterpriseId: props.enterpriseId,
      entName: props.enterpriseName,
      backgroundColor: props.backgroundColor
    }
    try {
      const result = await saveShareQuery(params)
      const query = {
        scene: 'id=' + result,
        path: 'pagesB/jobFair/positionClassification',
        width: 200,
        autoColor: false,
        checkPath: true,
        hyaline: false
      }

      try {
        const data = await getJobAdvertisedShareQrcode(query)
        secondImg.src = 'data:image/png;base64,' + data 
      } catch {
        loading.value = false
      }
      
    } catch {
      loading.value = false
    }
    
  }

  img.onerror = (error) => {
    console.error('Failed to load image:', error)
    loading.value = false
  }

  img.src = props.bgImg
}

watch(
	() => props.show,
	(val) => {
		if (val) drawCanvas()
	}
)
</script>