menduner-uniapp/pagesB/sharePoster/index.vue

<template>
  <view style="position: relative;">
    <view v-if="shareUrl" class="d-flex align-center flex-column justify-center" style="height: 100vh;">
      <image v-if="!!shareUrl" :style="imgStyle" @click="handlePreviewSharePoster" :src="shareUrl" :show-menu-by-longpress="true"></image>
      <view class="color-999 ss-m-t-20 font-size-14 ss-m-b-50">点击图片预览，长按图片保存</view>
    </view>
		<canvas canvas-id="posterCanvas" class="shareCanvas" style="width: 330px; height: 600px;"></canvas>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { userStore } from '@/store/user'
import { onLoad } from '@dcloudio/uni-app'
import { getUserAvatar } from '@/utils/avatar'
import { getJobAdvertisedShareQrcode } from '@/api/user'

const useUserStore = userStore()
const baseInfo = computed(() => useUserStore?.baseInfo)
const shareUrl = ref('')
const windowWidth = ref(0)

onLoad(() => {
  const windowInfo = wx.getWindowInfo()
  windowWidth.value = windowInfo.windowWidth
  console.log(windowWidth.value, '当前机型屏幕宽')
})

const imgStyle = computed(() => {
  if (windowWidth.value <= 320) return `width: 259px; height: 460px;`
  if (windowWidth.value > 320 && windowWidth.value <= 375) return `width: 313px; height: 560px;`
  if (windowWidth.value > 375) return `width: 328px; height: 600px;`
})

// 图片预览
const handlePreviewSharePoster = () => {
	uni.previewImage({
		current: 0,
		longPressActions: {
			itemList: ['发送给朋友', '保存图片', '收藏']
		},
		urls: [shareUrl.value]
	})
}

const getImageTempRatio = (url) => {
  return new Promise((req, rej)=>{
    wx.getImageInfo({
      src:url,
      success:(res) =>{
        req(res)
      }
    })
  })
}

// 个人头像
const drawAvatar = (ctx, imagePath, x, y, radius, w, h) => {
  ctx.save() // 保存当前绘图上下文
  // 绘制圆形裁剪路径
  ctx.beginPath();
  ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI)
  ctx.clip();
  const rate = w / h
  // 绘制图片
  if (rate > 1) {
    const _len = 2 * radius / rate // lenH
    const _yStart = radius - _len / 2 + y
    ctx.drawImage(imagePath, x, _yStart, 2 * radius, _len) // 注意这里的宽高是直径的2倍
  } else {
    const _len = 2 * radius * rate // lenW
    const _xStart = radius - _len / 2 + x
    ctx.drawImage(imagePath, _xStart, y, _len, 2 * radius) // 注意这里的宽高是直径的2倍
  }
  ctx.restore() // 恢复之前保存的绘图上下文
}

const getToLocal = (base64data) => {
  const fsm = wx.getFileSystemManager()
  const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []
  if (!format) {
    return (new Error('ERROR_BASE64SRC_PARSE'))
  }
  const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`
  const buffer = wx.base64ToArrayBuffer(bodyData);
  fsm.writeFile({
    filePath,
    data: buffer,
    encoding: 'binary',
    success(r) {
      console.log(filePath,'filePath')
      qrCode.value = filePath
    },
    fail() {
      return (new Error('ERROR_BASE64SRC_WRITE'))
    }
  })
}

// 生成分享二维码
const qrCode = ref()
const handleShareCode = async () => {
	const userId = useUserStore?.accountInfo?.userId || ''
	const query = {
		scene: 'shareId=' + userId,
		path: 'pages/login/index',
		width: 200,
		autoColor: false,
		checkPath: true,
		hyaline: true
	}
	const res = await getJobAdvertisedShareQrcode(query)
	const data = res?.data ? 'data:image/png;base64,' + res.data : ''
  getToLocal(data)
}


const createPoster = async () => {
  uni.showLoading({ title: '生成中...', mask: true })
  await handleShareCode() // 生产分享二维码
  var context = uni.createCanvasContext('posterCanvas')

  //清空画布
  context.clearRect(0, 0, 330, 600)

  //背景图片 
  const { path: bgUrl } = await getImageTempRatio('https://minio.menduner.com/dev/63a182780d26bd552819431b0ca94be8e3c90a90e2f933c61e4c83b4614f2fc6.jpg')
  context.drawImage(bgUrl, 0, 0, 330, 600) // 路径、x、y、宽、高
  
  // 头像
  const avatarUrl = getUserAvatar(baseInfo.value?.avatar, baseInfo.value?.sex)
  const { path, width, height } = await getImageTempRatio(avatarUrl)
  drawAvatar(context, path, 124, 22, 40.5, width, height) // canvas、图片路径、x、y、半径

  //分享二维码
  // const { path: qrCode } = await getImageTempRatio('https://minio.citupro.com/dev/menduner/miniProgram.jpg')
  context.drawImage(qrCode.value, 105.5, 312.5, 120, 120)

  context.draw(false, () =>{
    wx.canvasToTempFilePath({ 
      canvasId: 'posterCanvas',
      success:(res)=>{
        shareUrl.value = res.tempFilePath
        console.log('canvas-success', shareUrl.value)
		    uni.hideLoading({})
      },
      fail:(err)=>{
        uni.hideLoading({})
        console.log('canvas-fail', err)
      }
    })
  })
}
createPoster()
</script>

<style scoped lang="scss">
.shareCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}
</style>