海报绘制

pagesB/positionDetail/index.vue

@@ -93,6 +93,25 @@
         <button v-else class="buttons btnStyle" @click="handleDelivery">我要投递</button>
       </view>
     </view>
+    <uni-popup
+        ref="poster"
+        type="center"
+        class="f-straight"
+        style="position: relative;"
+    >
+        <canvas
+          :style="{
+            width:`${appInfo.windowWidth}px;`,
+            height:`${appInfo.windowHeight}px;margin-left:-9999px; margin-top:-99.5vh;`
+          }" canvas-id="firstCanvas" id="firstCanvas"></canvas>
+        <image
+          :style="{ width:`${appInfo.windowWidth}px;`, height:`${appInfo.windowHeight*.9}px;`}"
+          :src="imgSrc"
+          mode="aspectFit"
+        />
+        <!-- <uni-icons v-if="!!imgSrc" type="clear" size="35" color="#FFF" style="position: absolute;top: 10px;right: 28px;" @click="posterClose"></uni-icons> -->
+    </uni-popup>
+    
     <!-- 选择简历 -->
     <uni-popup ref="popup" background-color="#fff" :mask-click="false" >
       <view class="dialogBox" style="width: 86vw;">
@@ -157,7 +176,7 @@
                 </view>
                 <view style="font-size:12px;">微信</view>
             </button>
-            <!-- <button class="f-straight" @click="createPoster">
+            <button class="f-straight" @click="createPoster">
                 <view class="share-round share-round-2" >
                     <uni-icons
                         type="download-filled"
@@ -166,7 +185,7 @@
                     />
                 </view>
                 <view style="font-size:12px;">生成海报</view>
-            </button> -->
+            </button>
         </view>
       </uni-popup-share>
     </uni-popup>
@@ -205,6 +224,10 @@ const positionInfo = ref({})
 
 const isEmployment = ref(null)
 
+const imgSrc = ref('')
+const appInfo = ref({})
+const poster = ref()
+
 const getPositionDetail = async () => {
   try {
     loading.value = true
@@ -406,10 +429,159 @@ onShareAppMessage((res) => {
     path
   }
 })
-
+// 获取设备信息
+function getSystemInfo(){
+  return new Promise((resolve, reject) =>{
+    uni.getSystemInfo({
+        success: (result) => {
+          console.log(result)
+          resolve(result)
+        },
+        fail: (err) => {
+          console.log(err)
+        }
+    })
+  })
+}
+function roundedRect(ctx, x, y, width, height, radius, color) {
+    ctx.beginPath();
+    ctx.moveTo(x, y + radius);
+    ctx.lineTo(x, y + height - radius);
+    ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
+    ctx.lineTo(x + width - radius, y + height);
+    ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
+    ctx.lineTo(x + width, y + radius);
+    ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
+    ctx.lineTo(x + radius, y);
+    ctx.quadraticCurveTo(x, y, x, y + radius);
+    // ctx.fillStyle = "#f5f5f5"; 
+    ctx.fillStyle = color; 
+    ctx.fill()
+    ctx.strokeStyle = color
+    ctx.stroke();
+}
+//微信获取图片信息
+function getImageTempRatio (url){
+    return new Promise((resolve, reject)=>{
+        wx.getImageInfo({
+            src:url,
+            success:(res) =>{
+              resolve(res)
+            }
+        })
+    })
+}
 // 生成海报
-const createPoster = async () => {
+async function createPoster () {
+  const top = 50
+  const left = 30
+  console.log(info.value)
+  sharePopup.value.close()
+  const res = await getSystemInfo()
+  const { windowWidth, windowHeight } = res
+  appInfo.value = {
+    windowWidth, windowHeight
+  }
+  var context = uni.createCanvasContext('firstCanvas')
+  //底色
+  context.setFillStyle('#03877a')
+  context.fillRect(0,0, windowWidth,  windowHeight)
+  // 职位信息
+  // 名称
+  context.setFillStyle('#FFF')
+  context.font = 'normal bold 26px Microsoft YaHei'
+  context.fillText(info.value.name, left, top)
+  // 薪酬
+  context.fillStyle = 'yellow'; 
+  context.font = 'normal 22px Microsoft YaHei'
+  const payText = `${info.value.payFrom}-${info.value.payTo} / ${positionInfo.value.payName}`
+  const payWidth = context.measureText(payText).width;  
+  const rightX = windowWidth - payWidth - left; 
+  context.fillText(payText, rightX, top);
+  // 地区|年限|学历
+  const areaText = `${positionInfo.value?.areaName} | ${positionInfo.value?.eduName} | ${positionInfo.value?.expName}`
+  context.setFillStyle('#FFF')
+  context.font = 'normal 14px Microsoft YaHei'
+  const subTitleH = top + 20
+  context.fillText(areaText, left, subTitleH)
+  // 企业信息卡片
+  roundedRect(context, left, subTitleH + 20 , windowWidth - 2 * left , 50, 10, 'rgba(255, 255, 255, 0.45)')
+  
+  // 企业信息
+  // const headerMsg = await getImageTempRatio(info.value.contact.avatar)
+  // context.drawImage(
+  //   headerMsg.path,
+  //   left + 5,
+  //   subTitleH + 25, 
+  //   40, 
+  //   40
+  // )
+  // 企业信息
+  context.setFillStyle('#FFF')
+  context.font = 'normal 16px Microsoft YaHei'
+  const emTextH = subTitleH + 50
+  context.fillText(info.value.enterprise.anotherName, left + 20, emTextH)
+  
+  const _areaText = `${info.value.areaName}`
+  const areaTextW = context.measureText(_areaText).width;  
+  const _rightX = windowWidth - areaTextW - left - 20; 
+  context.fillText(_areaText, _rightX, emTextH);
+  // 福利
+  // 卡片
+  roundedRect(context, 10, 200 , windowWidth - 20 , windowHeight - 300, 10,'#fff')
+  // 岗位
+  // context.setFillStyle('#000000')
+  // context.setFontSize(20)
+  // context.font = 'normal bold 20px Microsoft YaHei'
+  // context.fillText('111',windowWidth/10, windowHeight * 0.2)
+
+  // 地区频率时长薪资
+  // context.setFillStyle('#6c6e7b')
+  // context.setFontSize(15)
+  // context.font = 'normal 15px Microsoft YaHei'
+  // context.fillText(' | ',windowWidth/10, windowHeight * 0.2 + 30)
+  // context.setFontSize(18)
+  // context.font = 'normal 18px Microsoft YaHei'
+  // context.setFillStyle('#f67272')
+  // context.fillText('120/天', windowWidth/10, windowHeight * 0.2 + 60)
+  // 小程序码/ 二维码
+  context.drawImage(
+    // image.path,
+    windowWidth *0.5 - windowWidth/8,
+    windowHeight * 0.60, 
+    windowWidth/4, 
+    windowWidth/4
+  )
   
+  context.setFontSize(16)
+  context.fillText('长按二维码查看岗位', windowWidth/3.2, windowHeight * 0.65 + windowWidth/4)
+
+  context.draw(false, () =>{
+      uni.showLoading({
+          title: '加载中……',
+          icon: 'none',
+      })
+      setTimeout(() => {
+          wx.canvasToTempFilePath({ 
+              canvasId: 'firstCanvas',
+              x:0,
+              y:0,
+              success:(res)=>{
+                console.log('成功', res)
+                  imgSrc.value = res.tempFilePath
+
+              },
+              fail:(err)=>{
+                  console.log('canvasToTemp-fail', err)
+              },
+              complete:()=>{
+                  uni.hideLoading();
+              }
+          })
+      }, 3000)
+      // canvas生成图片
+      poster.value.open()
+  })
 }
 
 
@@ -467,4 +639,18 @@ const createPoster = async () => {
         background-color:#3693cd;
     }
 }
+.preview {
+  position: fixed;
+  z-index: 9;
+  height: 100vh;
+  width: 100vw;
+  left: 0;
+  top: 0;
+  .image {
+    position: absolute;
+    width: 80%;
+    left: 10%;
+    top: 100rpx;
+  }
+}
 </style>