分享图片修改

package-lock.json

@@ -1109,22 +1109,6 @@
         }
       }
     },
-    "@babel/runtime-corejs2": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.22.11.tgz",
-      "integrity": "sha512-6z+Y7otDbBpPbg+eXnYVnrR7J3bq5Xp31QiGf7bJzbBOYUXLDGXnCdmxzH3xGxczTvaSXV/oeXFV4PNq3f64Sg==",
-      "requires": {
-        "core-js": "^2.6.12",
-        "regenerator-runtime": "^0.14.0"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.14.0",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-          "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
-        }
-      }
-    },
     "@babel/template": {
       "version": "7.12.7",
       "resolved": "https://registry.npm.taobao.org/@babel/template/download/@babel/template-7.12.7.tgz?cache=0&sync_timestamp=1605904556456&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftemplate%2Fdownload%2F%40babel%2Ftemplate-7.12.7.tgz",
@@ -14667,23 +14651,6 @@
       "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
       "dev": true
     },
-    "qiniu-js": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/qiniu-js/-/qiniu-js-3.4.1.tgz",
-      "integrity": "sha512-8vxrLqDPlJUk3fUAaTozh3TAT3ww9B5KqGogmGuTiFHnewXDoMxTCSY5z8Ab5UNdrCo6ZxDM07G/o++CICRUFw==",
-      "requires": {
-        "@babel/runtime-corejs2": "^7.10.2",
-        "querystring": "^0.2.1",
-        "spark-md5": "^3.0.0"
-      },
-      "dependencies": {
-        "querystring": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
-          "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
-        }
-      }
-    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz?cache=0&sync_timestamp=1610598235973&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.5.2.tgz",
@@ -16323,11 +16290,6 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
-    "spark-md5": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
-      "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw=="
-    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/spdx-correct/download/spdx-correct-3.1.1.tgz?cache=0&sync_timestamp=1590161967473&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fspdx-correct%2Fdownload%2Fspdx-correct-3.1.1.tgz",

src/pagesHouse/vr.jsx

@@ -2,6 +2,7 @@ import Taro, { Component } from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import { arrToObj } from '@utils'
 
+import './vr.scss'
 class Index extends Component {
   onShareAppMessage() {
     const { id, estateName, area } = this.$router.params
@@ -34,7 +35,7 @@ class Index extends Component {
 
   constructor (props) {
     super(props)
-    
+
     this.state = {
       curObj: {},
       curStr: '',

src/pagesHouse/vr.scss

@@ -0,0 +1,4 @@
+@import '@css/mixin.scss';
+.l-box {
+  height: 100vh;
+}

src/pagesRoom/dtl.jsx

@@ -72,7 +72,7 @@ class Index extends Component {
       Taro.setStorageSync("APP_MY_REFERRER", referrer)
     }
   }
-  
+
   getDtl = () => {
     const { curId } = this.state
     Taro.api.room.apieshousedetail({id: curId}).then(res => {
@@ -98,7 +98,7 @@ class Index extends Component {
                 saleUserObj: list[0]
               })
             } else {
-              
+
 
               if (res.sale_user.sale_phone === '18907904022') {
                 Taro.api.room.apisalelist({
@@ -112,7 +112,7 @@ class Index extends Component {
                   })
                   Taro.setStorageSync('APP_cur_sale', {curObj: list[arrIndex]})
                 })
-              } else {          
+              } else {
                 this.setState({
                   saleUserObj: res.sale_user
                 })
@@ -122,7 +122,7 @@ class Index extends Component {
             }
           })
         } else {
-          
+
 
           if (res.sale_user.sale_phone === '18907904022') {
             Taro.api.room.apisalelist({
@@ -136,7 +136,7 @@ class Index extends Component {
               })
               Taro.setStorageSync('APP_cur_sale', {curObj: list[arrIndex]})
             })
-          } else {          
+          } else {
             this.setState({
               saleUserObj: res.sale_user
             })
@@ -251,7 +251,7 @@ class Index extends Component {
       })
     }
   }
-  
+
   renderMain () {
     const signRight = require('@img/icon_sign_right.png')
     const dictData = Taro.getStorageSync('dictData')
@@ -260,7 +260,7 @@ class Index extends Component {
     const roomDecObj = arrToObj(dictData.room_dec)
     const roomPositionObj = arrToObj(dictData.room_position)
     const { curObj } = this.state
-    
+
     const tagArr = curObj.custom_tag ? curObj.custom_tag.split(',') : []
     const moreImg = require('./img/dtl/bg_estate.png')
     const FH = Number(curObj.floor) || 1
@@ -286,14 +286,14 @@ class Index extends Component {
     const appUserInfo = Taro.getStorageSync('APP_userInfo')
 
     const schoolList = curObj.school_list && curObj.school_list.duikou ? curObj.school_list.duikou : []
-    
+
     // <View className="t t1">{arrToObj(dictData.school_attrib)[item.school_attrib]}</View>
     //           <View className="t t4">{arrToObj(dictData.school_type)[item.school_type]}</View>
     const schoolViews = schoolList.map((item) => {
       return (
         <View className="v-sub-op" key={item.id}>{`${item.school_name}[${arrToObj(dictData.school_attrib)[item.school_attrib]}][${arrToObj(dictData.school_type)[item.school_type]}]`}</View>
-      ) 
-      
+      )
+
     })
     // console.log(schoolStrList)
     return (
@@ -480,7 +480,7 @@ class Index extends Component {
 
 
 
-  
+
 
   renderOther () {
     const { curObj } = this.state
@@ -584,7 +584,7 @@ class Index extends Component {
   dealCanvasImg (qrcodeSrc) {
     const { curObj } = this.state
     const that = this
-    const imageArr = curObj.images.split(',')
+    const imageArr = (curObj.images || '').split(',')
     const processMultipleImages = (url) => {
       return new Promise((resolve, reject) => {
         Taro.getImageInfo({
@@ -606,7 +606,7 @@ class Index extends Component {
       let tempImgArr = img.map(i => i.path)
       that.dealCanvas(tempImgArr)
     })
-    
+
   }
 
 
@@ -614,7 +614,7 @@ class Index extends Component {
 
   // drawAndSharetestImage () {
   //   const { curObj } = this.state
-  //   const imageArr = curObj.images.split(',')
+  //   const imageArr = (curObj.images || '').split(',')
   //   if (imageArr.length < 2) {
   //     Taro.$msgConfirm('房源图片不足~')
   //     return
@@ -628,7 +628,7 @@ class Index extends Component {
   //   ctx.fillStyle = "#fff"
   //   ctx.fill()
 
-    
+
   //   let imgBg = cvs.createImage();
   //   imgBg.src = require('./img/dtl/bg_room_dtl.jpg')
   //   imgBg.onload = () => {
@@ -640,30 +640,30 @@ class Index extends Component {
   //   imgBg.onload = () => {
   //     ctx.drawImage(img1, 83, 358, 256, 200)
   //   }
-    
+
 
   //   let img2 = cvs.createImage();
   //   img2.src = curObj.house_img
   //   imgBg.onload = () => {
   //     ctx.drawImage(img2, 362, 358, 256, 200)
   //   }
-    
+
 
   //   let img3 = cvs.createImage();
   //   img3.src = imageArr[0] + '_adm0'
   //   imgBg.onload = () => {
   //     ctx.drawImage(img3, 83, 570, 256, 200)
   //   }
-    
+
 
   //   let img4 = cvs.createImage();
   //   img4.src = imageArr[1] + '_adm0'
   //   imgBg.onload = () => {
   //     ctx.drawImage(img4, 362, 570, 256, 200)
   //   }
-    
 
-    
+
+
   //   that.drawText(ctx, '#333', curObj.title.length > 25 ? curObj.title.substring(0, 25) + '...' : curObj.title, 98, 846, '18px')
   //   if (curObj.estate_name.length > 7) {
   //     that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 36px')
@@ -674,7 +674,7 @@ class Index extends Component {
 
   //   that.drawText(ctx, '#333', curObj.area + '㎡', 140, 310, 'normal bold 28px')
   //   that.drawText(ctx, '#df6135', curObj.floor_price + '万', 280, 310, 'normal bold 32px')
-    
+
 
   //   // let base64 = ctx.canvas.toDataURL("image/png")
   //   // that.setState({
@@ -682,8 +682,8 @@ class Index extends Component {
   //   // })
 
   //   // that.popupOpen()
-    
-    
+
+
   //   const imgData = cvs.toDataURL();
   //   console.log('imgData')
   //   console.log(imgData)
@@ -712,7 +712,7 @@ class Index extends Component {
   //   fs.close()
 
 
-    
+
   // }
 
 
@@ -731,7 +731,7 @@ class Index extends Component {
       }
       return
     }
-    const imageArr = curObj.images.split(',')
+    const imageArr = (curObj.images || '').split(',')
     if (imageArr.length < 2) {
       Taro.$msgConfirm('房源图片不足~')
       return
@@ -741,7 +741,7 @@ class Index extends Component {
       title: '图片智能生成中..'
     })
     const that = this
-    const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 990})
+    const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 1516})
     const ctx = cvs.getContext('2d')
     ctx.clearRect(0, 0, cvs.width, cvs.height)
     ctx.rect(0 , 0 , cvs.width , cvs.height)
@@ -750,58 +750,60 @@ class Index extends Component {
 
     let imgBg = cvs.createImage();
     // imgBg.src = require('./img/dtl/bg_room_dtl.jpg')
-    imgBg.src = 'https://img.honglounews.com/20240202095009-3067.jpg_adm0?r='+ Math.random()
+    imgBg.src = 'https://img.honglounews.com/20260106095227-6921.jpg_adm0?r='+ Math.random()
     await new Promise(resolve => {
       imgBg.onload = resolve;
     })
 
-    ctx.drawImage(imgBg, 0, 0, 700, 990)
+    ctx.drawImage(imgBg, 0, 0, 700, 1516)
     let img1 = cvs.createImage();
     await new Promise(resolve => {
       img1.onload = resolve;
       img1.src = curObj.pri_image + '_adm0'
     })
-    ctx.drawImage(img1, 83, 358, 256, 200)
+    ctx.drawImage(img1, 0, 530, 345, 286)
 
     let img2 = cvs.createImage();
     await new Promise(resolve => {
       img2.onload = resolve;
       img2.src = curObj.house_img
     })
-    ctx.drawImage(img2, 362, 358, 256, 200)
+    ctx.drawImage(img2, 356, 530, 345, 286)
 
     let img3 = cvs.createImage();
     await new Promise(resolve => {
       img3.onload = resolve;
       img3.src = imageArr[0] + '_adm0'
     })
-    ctx.drawImage(img3, 83, 570, 256, 200)
+    ctx.drawImage(img3, 0, 828, 345, 286)
 
     let img4 = cvs.createImage();
     await new Promise(resolve => {
       img4.onload = resolve;
       img4.src = imageArr[1] + '_adm0'
     })
-    ctx.drawImage(img4, 362, 570, 256, 200)
+    ctx.drawImage(img4, 356, 828, 345, 286)
 
-    
-    that.drawText(ctx, '#333', curObj.title.length > 25 ? curObj.title.substring(0, 25) + '...' : curObj.title, 98, 846, '18px')
+
+    that.drawText(ctx, '#343434', curObj.title.length > 25 ? curObj.title.substring(0, 25) + '...' : curObj.title, 120, 460, '28px')
     if (str === 'hide') {
-      that.drawText(ctx, '#333', '详情咨询巴老师', 80, 220, 'normal bold 40px')
+      that.drawCenterText(ctx, '#333', '详情咨询巴老师1', 350, 255, 'normal bold 60px')
     } else {
       if (curObj.estate_name.length > 10) {
-        that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 26px')
+        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 30px')
       } else if (curObj.estate_name.length > 7) {
-        that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 36px')
+        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 46px')
       } else {
-        that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 56px')
+        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 60px')
       }
     }
 
 
-    that.drawText(ctx, '#333', curObj.area + '㎡', 140, 310, 'normal bold 28px')
-    that.drawText(ctx, '#df6135', curObj.price + '万', 280, 310, 'normal bold 32px')
-    
+    // that.drawText(ctx, '#333', curObj.area + '㎡', 140, 310, 'normal bold 28px')
+    // that.drawText(ctx, '#df6135', curObj.price + '万', 280, 310, 'normal bold 32px')
+    that.drawText(ctx, '#ff2400', curObj.area, 160, 390, 'normal bold 60px')
+    that.drawText(ctx, '#ff2400', curObj.price, 380, 390, 'normal bold 60px')
+
 
     // let base64 = ctx.canvas.toDataURL("image/png")
     // that.setState({
@@ -809,7 +811,7 @@ class Index extends Component {
     // })
 
     // that.popupOpen()
-    
+
     setTimeout(() => {
       imgBg = null
       img1 = null
@@ -818,7 +820,7 @@ class Index extends Component {
       img4 = null
       Taro.hideLoading()
     }, 6000)
-    
+
     const imgData = cvs.toDataURL();
     const time = new Date().getTime();
     const fs = wx.getFileSystemManager();
@@ -851,10 +853,10 @@ class Index extends Component {
     fs.close()
 
 
-    
+
   }
 
- 
+
   async drawAndShareImage (str) {
     const { curObj, curShareCardImg, curShareCardImgType } = this.state
     if (curShareCardImg) {
@@ -870,7 +872,7 @@ class Index extends Component {
       }
       return
     }
-    const imageArr = curObj.images.split(',')
+    const imageArr = (curObj.images || '').split(',')
     if (imageArr.length < 2) {
       Taro.$msgConfirm('房源图片不足~')
       return
@@ -880,7 +882,7 @@ class Index extends Component {
       title: '图片智能生成中..'
     })
     const that = this
-    const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 990})
+    const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 1516})
     const ctx = cvs.getContext('2d')
     ctx.clearRect(0, 0, cvs.width, cvs.height)
     ctx.rect(0 , 0 , cvs.width , cvs.height)
@@ -889,58 +891,57 @@ class Index extends Component {
 
     let imgBg = cvs.createImage();
     // imgBg.src = require('./img/dtl/bg_room_dtl.jpg')
-    imgBg.src = 'https://img.honglounews.com/20240202095009-3067.jpg_adm0?r='+ Math.random()
+    imgBg.src = 'https://img.honglounews.com/20260106095227-6921.jpg_adm0?r='+ Math.random()
     await new Promise(resolve => {
       imgBg.onload = resolve;
     })
 
-    ctx.drawImage(imgBg, 0, 0, 700, 990)
+    ctx.drawImage(imgBg, 0, 0, 700, 1516)
     let img1 = cvs.createImage();
     await new Promise(resolve => {
       img1.onload = resolve;
       img1.src = curObj.pri_image + '_adm0'
     })
-    ctx.drawImage(img1, 83, 358, 256, 200)
+    ctx.drawImage(img1, 0, 530, 345, 286)
 
     let img2 = cvs.createImage();
     await new Promise(resolve => {
       img2.onload = resolve;
       img2.src = curObj.house_img
     })
-    ctx.drawImage(img2, 362, 358, 256, 200)
+    ctx.drawImage(img2, 356, 530, 345, 286)
 
     let img3 = cvs.createImage();
     await new Promise(resolve => {
       img3.onload = resolve;
       img3.src = imageArr[0] + '_adm0'
     })
-    ctx.drawImage(img3, 83, 570, 256, 200)
+    ctx.drawImage(img3, 0, 828, 345, 286)
 
     let img4 = cvs.createImage();
     await new Promise(resolve => {
       img4.onload = resolve;
       img4.src = imageArr[1] + '_adm0'
     })
-    ctx.drawImage(img4, 362, 570, 256, 200)
+    ctx.drawImage(img4, 356, 828, 345, 286)
+
 
-    
-    that.drawText(ctx, '#333', curObj.title.length > 25 ? curObj.title.substring(0, 25) + '...' : curObj.title, 98, 846, '18px')
+    that.drawText(ctx, '#343434', curObj.title.length > 25 ? curObj.title.substring(0, 25) + '...' : curObj.title, 120, 460, '28px')
     if (str === 'hide') {
-      that.drawText(ctx, '#333', '详情咨询巴老师', 80, 220, 'normal bold 40px')
+      that.drawCenterText(ctx, '#333', '详情咨询巴老师1', 350, 255, 'normal bold 60px')
     } else {
       if (curObj.estate_name.length > 10) {
-        that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 26px')
+        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 30px')
       } else if (curObj.estate_name.length > 7) {
-        that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 36px')
+        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 46px')
       } else {
-        that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 56px')
+        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 60px')
       }
     }
 
+    that.drawText(ctx, '#ff2400', curObj.area, 160, 390, 'normal bold 60px')
+    that.drawText(ctx, '#ff2400', curObj.price, 380, 390, 'normal bold 60px')
 
-    that.drawText(ctx, '#333', curObj.area + '㎡', 140, 310, 'normal bold 28px')
-    that.drawText(ctx, '#df6135', curObj.price + '万', 280, 310, 'normal bold 32px')
-    
 
     // let base64 = ctx.canvas.toDataURL("image/png")
     // that.setState({
@@ -948,7 +949,7 @@ class Index extends Component {
     // })
 
     // that.popupOpen()
-    
+
     setTimeout(() => {
       imgBg = null
       img1 = null
@@ -957,7 +958,7 @@ class Index extends Component {
       img4 = null
       Taro.hideLoading()
     }, 6000)
-    
+
     const imgData = cvs.toDataURL();
     const time = new Date().getTime();
     const fs = wx.getFileSystemManager();
@@ -990,7 +991,7 @@ class Index extends Component {
     fs.close()
 
 
-    
+
   }
   drawText = (ctx, color, text, x, y, font) => {
     ctx.font=`${font} Microsoft YaHei`;
@@ -999,7 +1000,15 @@ class Index extends Component {
     ctx.fillText(text, x, y);
     ctx.stroke();
     ctx.closePath();
-   }
+  }
+  drawCenterText = (ctx, color, text, x, y, font) => {
+    ctx.font=`${font} Microsoft YaHei`;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'center';  // 修改为居中对齐
+    ctx.fillText(text, x, y);
+    ctx.stroke();
+    ctx.closePath();
+  }
 
   renderShare () {
     const iconShare = require('@img/images/icon_g_share6s.png')
@@ -1030,10 +1039,10 @@ class Index extends Component {
   goBackPrev () {
     // 获取当前页面栈
     const pages = Taro.getCurrentPages()
-    
+
     // 判断是否有上一页
     const hasPreviousPage = pages.length > 1
-    
+
     if (hasPreviousPage) {
       // 如果有上一页，使用 navigateBack 返回至上一页
       Taro.navigateBack({