分享测试

pages.json

@@ -252,6 +252,12 @@
 					"style": {
 						"navigationBarTitleText": "精选企业"
 					}
+				},
+				{
+					"path": "sharePoster/index",
+					"style": {
+						"navigationBarTitleText": "我的分享码"
+					}
 				}
 			]
 		}

pagesB/sharePoster/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <view style="position: relative;">
+    <view v-if="shareUrl" class="d-flex align-center flex-column">
+      <image v-if="!!shareUrl" class="imgBox" @click="handlePreviewSharePoster" :src="shareUrl" :show-menu-by-longpress="true"></image>
+      <view class="color-999 ss-m-t-20 font-size-14">点击图片预览，长按图片保存</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'
+
+const useUserStore = userStore()
+const baseInfo = computed(() => useUserStore?.baseInfo)
+const shareUrl = ref('')
+
+// 图片预览
+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) => {
+  ctx.save() // 保存当前绘图上下文
+  // 绘制圆形裁剪路径
+  ctx.beginPath();
+  ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI)
+  ctx.clip();
+  // 绘制图片
+  ctx.drawImage(imagePath, x, y, 2 * radius, 2 * radius) // 注意这里的宽高是直径的2倍
+  ctx.restore() // 恢复之前保存的绘图上下文
+}
+
+const createPoster = async () => {
+  uni.showLoading({ title: '生成中...', mask: true })
+  var context = uni.createCanvasContext('posterCanvas')
+
+  //清空画布
+  context.clearRect(0, 0, 330, 600)
+
+  //背景图片
+  const { path: bgUrl } = await getImageTempRatio('https://minio.menduner.com/dev/a3cfa7975c5905441175abaa738cfca0bd794dbb6249318328c8cfff69ca91fe.jpg')
+  context.drawImage(bgUrl, 0, 0, 330, 600) // 路径、x、y、宽、高
+  
+  // 头像
+  const { path } = await getImageTempRatio(baseInfo.value.avatar)
+  drawAvatar(context, path, 121.5, 74, 43.5) // canvas、图片路径、x、y、半径
+
+  //分享二维码
+  const { path: qrCode } = await getImageTempRatio('https://minio.citupro.com/dev/menduner/miniProgram.jpg')
+  context.drawImage(qrCode, 108, 310, 110, 110)
+
+  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;
+}
+.imgBox {
+  width: 330px;
+  height: 600px;
+}
+</style>