|
@@ -47,7 +47,8 @@ class Index extends Component {
|
|
|
curId,
|
|
|
curObj: {},
|
|
|
curImgIndex: 0,
|
|
|
- curShareCardImg: require('./img/dtl/bg_room_dtl.png')
|
|
|
+ // curShareCardImg: require('./img/dtl/bg_room_dtl.png')
|
|
|
+ curShareCardImg: ''
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -67,7 +68,6 @@ class Index extends Component {
|
|
|
Taro.removeStorageSync('APP_cur_sale')
|
|
|
Taro.setStorageSync("APP_MY_REFERRER", referrer)
|
|
|
}
|
|
|
- // this.popupOpen()
|
|
|
}
|
|
|
|
|
|
getDtl = () => {
|
|
@@ -76,7 +76,6 @@ class Index extends Component {
|
|
|
Taro.setNavigationBarTitle({
|
|
|
title: res.title || '房源详情'
|
|
|
})
|
|
|
- // this.drawAndShareImage(res.mini_coder)
|
|
|
this.setState({
|
|
|
curObj: res || {}
|
|
|
}, () =>{
|
|
@@ -474,7 +473,6 @@ class Index extends Component {
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-
|
|
|
renderPopup () {
|
|
|
const { isPopupShow, curShareCardImg } = this.state
|
|
|
return (
|
|
@@ -482,10 +480,12 @@ class Index extends Component {
|
|
|
isOpened={isPopupShow}
|
|
|
onClose={this.popupClose.bind(this)}
|
|
|
>
|
|
|
- <Image
|
|
|
- className="scoped-share-card-img"
|
|
|
- src={curShareCardImg}
|
|
|
- />
|
|
|
+ <View className="scoped-share-card-img">
|
|
|
+ <Image
|
|
|
+ className="img"
|
|
|
+ src={curShareCardImg}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
</AtCurtain>
|
|
|
)
|
|
|
}
|
|
@@ -501,42 +501,283 @@ class Index extends Component {
|
|
|
}
|
|
|
|
|
|
|
|
|
- drawAndShareImage (qrcodeSrc) {
|
|
|
+ dealCanvasImg (qrcodeSrc) {
|
|
|
const { curObj } = this.state
|
|
|
const that = this
|
|
|
- const canvas = Taro.createOffscreenCanvas({type: '2d', width: 600, height: 1067})
|
|
|
- const ctx = canvas.getContext('2d')
|
|
|
- ctx.rect(0 , 0 , canvas.width , canvas.height)
|
|
|
+ const imageArr = curObj.images.split(',')
|
|
|
+ const processMultipleImages = (url) => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ Taro.getImageInfo({
|
|
|
+ src: url,
|
|
|
+ success: (res) => {
|
|
|
+ resolve(res)
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ Taro.showToast({
|
|
|
+ title: '下载失败!'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ Promise.all(
|
|
|
+ imageArr.map(img => processMultipleImages(img+'_adm0'))
|
|
|
+ ).then(img => {
|
|
|
+ let tempImgArr = img.map(i => i.path)
|
|
|
+ that.dealCanvas(tempImgArr)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // drawAndShareImage () {
|
|
|
+ // const { curObj } = this.state
|
|
|
+ // const imageArr = curObj.images.split(',')
|
|
|
+ // if (imageArr.length < 2) {
|
|
|
+ // Taro.$msgConfirm('房源图片不足~')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // console.log(curObj)
|
|
|
+ // const that = this
|
|
|
+ // const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 990})
|
|
|
+ // const ctx = cvs.getContext('2d')
|
|
|
+ // ctx.clearRect(0, 0, cvs.width, cvs.height)
|
|
|
+ // ctx.rect(0 , 0 , cvs.width , cvs.height)
|
|
|
+ // ctx.fillStyle = "#fff"
|
|
|
+ // ctx.fill()
|
|
|
+
|
|
|
+
|
|
|
+ // let imgBg = cvs.createImage();
|
|
|
+ // imgBg.src = require('./img/dtl/bg_room_dtl.jpg')
|
|
|
+ // imgBg.onload = () => {
|
|
|
+ // ctx.drawImage(imgBg, 0, 0, 700, 990)
|
|
|
+ // }
|
|
|
+
|
|
|
+ // let img1 = cvs.createImage();
|
|
|
+ // img1.src = curObj.pri_image + '_adm0'
|
|
|
+ // 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')
|
|
|
+ // } else {
|
|
|
+ // that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 56px')
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // 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({
|
|
|
+ // // curShareCardImg: base64
|
|
|
+ // // })
|
|
|
+
|
|
|
+ // // that.popupOpen()
|
|
|
+
|
|
|
+
|
|
|
+ // const imgData = cvs.toDataURL();
|
|
|
+ // console.log('imgData')
|
|
|
+ // console.log(imgData)
|
|
|
+ // const time = new Date().getTime();
|
|
|
+ // const fs = wx.getFileSystemManager();
|
|
|
+ // const filePath = Taro.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";
|
|
|
+ // fs.writeFile({
|
|
|
+ // filePath,
|
|
|
+ // data: imgData.replace(/^data:image\/\w+;base64,/, ""),
|
|
|
+ // encoding: 'base64',
|
|
|
+ // success: res => {
|
|
|
+ // console.log('成功:'+res)
|
|
|
+ // wx.showShareImageMenu({
|
|
|
+ // path: filePath,
|
|
|
+ // success: res => {
|
|
|
+ // console.log(res, 11);
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // fail: err => {
|
|
|
+ // // 此处可能存在内存满了的情况
|
|
|
+ // // 需要根据具体需求处理
|
|
|
+ // console.log(err);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // fs.close()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ async drawAndShareImage () {
|
|
|
+ const { curObj, curShareCardImg } = this.state
|
|
|
+ if (curShareCardImg) {
|
|
|
+ wx.showShareImageMenu({
|
|
|
+ path: curShareCardImg,
|
|
|
+ success: res => {
|
|
|
+ console.log(res, 22);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const imageArr = curObj.images.split(',')
|
|
|
+ if (imageArr.length < 2) {
|
|
|
+ Taro.$msgConfirm('房源图片不足~')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ Taro.showLoading({
|
|
|
+ mask: true,
|
|
|
+ title: '图片智能生成中..'
|
|
|
+ })
|
|
|
+ const that = this
|
|
|
+ const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 990})
|
|
|
+ const ctx = cvs.getContext('2d')
|
|
|
+ ctx.clearRect(0, 0, cvs.width, cvs.height)
|
|
|
+ ctx.rect(0 , 0 , cvs.width , cvs.height)
|
|
|
ctx.fillStyle = "#fff"
|
|
|
ctx.fill()
|
|
|
- const img1 = canvas.createImage()
|
|
|
- img1.src = require('./img/dtl/bg_room_dtl.png')
|
|
|
- img1.crossOrigin = 'Anonymous'
|
|
|
- img1.onload = () => {
|
|
|
- ctx.drawImage(img1, 0, 0, 600, 1067)
|
|
|
- const img2 = canvas.createImage()
|
|
|
- img2.src = qrcodeSrc
|
|
|
- img2.crossOrigin = 'Anonymous'
|
|
|
- img2.onload = () => {
|
|
|
- ctx.drawImage(img2, 320, 950, 100, 100)
|
|
|
- that.drawText(ctx, 'red', "哈哈哈哈,测试文字", 100, 500)
|
|
|
- let base64 = ctx.canvas.toDataURL("image/png")
|
|
|
+
|
|
|
+ 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()
|
|
|
+ await new Promise(resolve => {
|
|
|
+ imgBg.onload = resolve;
|
|
|
+ })
|
|
|
+
|
|
|
+ ctx.drawImage(imgBg, 0, 0, 700, 990)
|
|
|
+ let img1 = cvs.createImage();
|
|
|
+ await new Promise(resolve => {
|
|
|
+ img1.onload = resolve;
|
|
|
+ img1.src = curObj.pri_image + '_adm0'
|
|
|
+ })
|
|
|
+ ctx.drawImage(img1, 83, 358, 256, 200)
|
|
|
+
|
|
|
+ let img2 = cvs.createImage();
|
|
|
+ await new Promise(resolve => {
|
|
|
+ img2.onload = resolve;
|
|
|
+ img2.src = curObj.house_img
|
|
|
+ })
|
|
|
+ ctx.drawImage(img2, 362, 358, 256, 200)
|
|
|
+
|
|
|
+ let img3 = cvs.createImage();
|
|
|
+ await new Promise(resolve => {
|
|
|
+ img3.onload = resolve;
|
|
|
+ img3.src = imageArr[0] + '_adm0'
|
|
|
+ })
|
|
|
+ ctx.drawImage(img3, 83, 570, 256, 200)
|
|
|
+
|
|
|
+ let img4 = cvs.createImage();
|
|
|
+ await new Promise(resolve => {
|
|
|
+ img4.onload = resolve;
|
|
|
+ img4.src = imageArr[1] + '_adm0'
|
|
|
+ })
|
|
|
+ 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')
|
|
|
+ } else {
|
|
|
+ that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 56px')
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ 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({
|
|
|
+ // curShareCardImg: base64
|
|
|
+ // })
|
|
|
+
|
|
|
+ // that.popupOpen()
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ imgBg = null
|
|
|
+ img1 = null
|
|
|
+ img2 = null
|
|
|
+ img3 = null
|
|
|
+ img4 = null
|
|
|
+ Taro.hideLoading()
|
|
|
+ }, 6000)
|
|
|
+
|
|
|
+ const imgData = cvs.toDataURL();
|
|
|
+ const time = new Date().getTime();
|
|
|
+ const fs = wx.getFileSystemManager();
|
|
|
+ const filePath = Taro.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";
|
|
|
+ fs.writeFile({
|
|
|
+ filePath,
|
|
|
+ data: imgData.replace(/^data:image\/\w+;base64,/, ""),
|
|
|
+ encoding: 'base64',
|
|
|
+ success: res => {
|
|
|
that.setState({
|
|
|
- curShareCardImg: base64
|
|
|
+ curShareCardImg: filePath
|
|
|
+ })
|
|
|
+ Taro.hideLoading()
|
|
|
+ wx.showShareImageMenu({
|
|
|
+ path: filePath,
|
|
|
+ success: res => {
|
|
|
+ console.log(res, 11);
|
|
|
+ }
|
|
|
})
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ // 此处可能存在内存满了的情况
|
|
|
+ // 需要根据具体需求处理
|
|
|
+ console.log(err);
|
|
|
+ Taro.hideLoading()
|
|
|
}
|
|
|
- }
|
|
|
+ });
|
|
|
+ fs.close()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
- drawText = (ctx, color, text, x, y, font = 50) => {
|
|
|
- ctx.font="50px Arial";
|
|
|
+ drawText = (ctx, color, text, x, y, font) => {
|
|
|
+ ctx.font=`${font} Microsoft YaHei`;
|
|
|
ctx.fillStyle = color;
|
|
|
ctx.textAlign = 'left';
|
|
|
ctx.fillText(text, x, y);
|
|
|
- // ctx.stroke();
|
|
|
- // ctx.closePath();
|
|
|
+ ctx.stroke();
|
|
|
+ ctx.closePath();
|
|
|
}
|
|
|
|
|
|
-
|
|
|
+ renderShare () {
|
|
|
+ const iconShare = require('@img/images/icon_g_share6s.png')
|
|
|
+ return (
|
|
|
+ <Button className="g-icon-share btn-to-div" onClick={this.drawAndShareImage.bind(this)}>
|
|
|
+ <Image className="img" src={iconShare} />
|
|
|
+ </Button>
|
|
|
+ )
|
|
|
+ }
|
|
|
|
|
|
|
|
|
render () {
|
|
@@ -550,6 +791,7 @@ class Index extends Component {
|
|
|
{(curObj.es_house_list && curObj.es_house_list.length > 0) && this.renderOther()}
|
|
|
{this.renderSale()}
|
|
|
{this.renderPopup()}
|
|
|
+ {this.renderShare()}
|
|
|
</View>
|
|
|
)
|
|
|
}
|