证书分享功能备份

pagesA/student/certificateDetail-copy.vue

@@ -0,0 +1,116 @@
+<!-- 分享招聘会 -->
+<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: ${canvasWidth}px; height: ${canvasHeight}px;`"></canvas>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { timesTampChange } from '@/utils/date'
+import { formatName } from '@/utils/getText'
+
+const canvasWidth = 500
+const canvasHeight = 700
+
+const shareUrl = ref('')
+const windowWidth = ref(0)
+
+const itemData = ref(null)
+onLoad(async (options) => {
+  if (options.itemData) {
+    itemData.value = JSON.parse(options.itemData)
+    createPoster()
+  }
+  const windowInfo = wx.getWindowInfo()
+  windowWidth.value = windowInfo.windowWidth
+})
+
+const imgStyle = computed(() => {
+  if (windowWidth.value <= 320) return `width: 259px; height: ${Math.round((canvasHeight*259)/canvasWidth)}px;`
+  if (windowWidth.value > 320 && windowWidth.value <= 375) return `width: 313px; height: ${Math.round((canvasHeight*313)/canvasWidth)}px;`
+  if (windowWidth.value > 375) return `width: 328px; height: ${Math.round((canvasHeight*328)/canvasWidth)}px;`
+})
+
+// 图片预览
+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 createPoster = async () => {
+  uni.showLoading({ title: '生成中...', mask: true })
+  var ctx = uni.createCanvasContext('posterCanvas')
+  //清空画布
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+
+  //背景图片
+  const { path: bgUrl } = await getImageTempRatio('https://minio.citupro.com/dev/static/bgc.jpg')
+  ctx.drawImage(bgUrl, 0, 0, canvasWidth, canvasHeight) // 路径、x、y、宽、高
+  
+  const info = { ...itemData.value }
+  // 绘制文字内容
+  ctx.setFontSize(16)
+  if (info?.student?.schoolName) ctx.fillText(info.student.schoolName, 50, 130)
+  if (info?.student?.majorName) ctx.fillText(info.student.majorName, 50, 160)
+  if (info?.person?.name) ctx.fillText(info.person.name, 50, 190)
+  if (info?.startTime) ctx.fillText(timesTampChange(info.startTime, 'Y-M-D'), 50, 250)
+  if (info?.endTime) ctx.fillText(timesTampChange(info?.endTime, 'Y-M-D'), 50, 310)
+  if (info?.enterprise?.anotherName || info?.enterprise?.name) ctx.fillText(formatName(info.enterprise?.anotherName || info.enterprise.name), 50, 400)
+  if (info?.evaluate) ctx.fillText(info.evaluate, 20, 460)
+  if (info?.createTime) ctx.fillText(timesTampChange(info?.createTime, 'Y-M-D'), 200, 520)
+
+  ctx.font = 'bold';
+  ctx.fillText('兹有', 20, 100)
+  ctx.fillText('同学于', 20, 220)
+  ctx.fillText('至', 20, 280)
+  ctx.fillText('在', 20, 340)
+  ctx.fillText('实习。', 20, 430)
+  ctx.fillText('特此证明。', 20, 490)
+
+  ctx.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)
+      }
+    })
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.shareCanvas {
+	position: fixed;
+	top: -99999upx;
+	left: -99999upx;
+	z-index: -99999;
+}
+</style>