feats

src/components/Poster/Poster.jsx

+import React, { useEffect, useRef, useState } from 'react'
+import Taro from '@tarojs/taro'
+import { Canvas, View } from '@tarojs/components'
+import { getConfig } from './config'
+import posterSDKFactory from './sdk'
+
+export default (props) => {
+  const { dataSource, onStart, onEnd, onError } = props
+
+  const [sdk, setSDK] = useState()
+  const processing = useRef(false)
+
+  const config = useRef()
+  config.current = getConfig()
+
+  useEffect(() => {
+    Taro.nextTick(() => {
+      posterSDKFactory('#canvas-poster').then((res) => {
+        res.initCanvas({
+          ...config.current,
+        })
+        setSDK(res)
+      })
+    })
+  }, [])
+
+  useEffect(() => {
+    const { poster, miniCode, name, avatar, desc = '长按识别在线看房',  } = dataSource || {}
+    if (sdk && poster && !processing.current) {
+      onStart()
+      processing.current = true
+      const conf = config.current
+      
+      sdk.onError((err) => {
+        if (onError) {
+          onError(err)
+        } else {
+          console.error(err)
+        }
+      })
+
+      Promise.all([
+        sdk.getImage(poster),
+        sdk.getImage(miniCode),
+        sdk.getImage(avatar),
+      ]).then((res) => {
+        const [posterImg, miniCodeImg, avatarImg] = res
+
+        // 封面
+        sdk.drawImage(posterImg, conf.poster)
+        // 头像
+        sdk.drawImage(avatarImg, conf.avatar)
+        // 小程序码
+        sdk.drawImage(miniCodeImg, conf.miniCode)
+        // 名称
+        sdk.darwText(name, conf.name)
+        // 小程序码
+        sdk.darwText(desc, conf.desc)
+
+        //
+        const image = sdk.toDataURL()
+        onEnd(image, sdk)
+      }).catch(([e1, e2, e3]) => {
+        if (onError) {
+          onError([e1, e2, e3])
+        }
+      })
+    }
+  }, [sdk, dataSource, onStart, onEnd, onError])
+
+  return <View style={{width: 0, height: 0}}><Canvas type='2d' id='canvas-poster' /></View>
+}

src/components/Poster/config.js

+import Taro, { preloadData } from '@tarojs/taro'
+
+/**
+ * 获取配置
+ * @returns 
+ */
+export function getConfig() {
+  // https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.html
+  const systemInfo = Taro.getStorageSync('systemInfo')
+  const { windowWidth, pixelRatio: dpr } = systemInfo
+
+  // canvas
+  const canvas = {
+    width: windowWidth * dpr,
+    // 设计稿宽高比 2.16  = height / width
+    height: windowWidth * dpr * 2.16,
+  }
+
+  // 图片
+  const poster = {
+    width: canvas.width,
+    height: canvas.width * 16 / 9, // 图片宽高 9 : 16 占用 canvas 80%
+    x: 0,
+    y: 0,
+  }
+
+  const marign = 22.5 * dpr;
+  const innerMargin = 15 * dpr
+
+  // 头像
+  const avatar = {
+    arc: true,  // arc 代表裁剪为圆形
+    width: 66 * dpr,
+    height: 66 * dpr,
+    x: marign,
+    y: poster.height + (39 * dpr),
+  }
+
+  // 小程序码
+  const miniCode = {
+    arc: true,
+    width: 99 * dpr,
+    height: 99 * dpr,
+    x: canvas.width - (99 * dpr) - marign,  // 99 是宽度
+    y: poster.height + (20 * dpr),
+  }
+
+  // 姓名
+  const name = {
+    // https://developer.mozilla.org/zh-CN/docs/Web/CSS/font
+    font: `${15 * dpr}px serif`,
+    // https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fillStyle
+    fillStyle: '#333333',
+
+    // 左右两边边距
+    // 左右两边文字边距
+    maxWidth: canvas.width - (marign * 2) - avatar.width - miniCode.width - (innerMargin * 2),
+
+    x: marign + avatar.width + innerMargin,
+    y: poster.height + (65 * dpr),
+  }
+
+  // 说明
+  const desc = {
+    font: `${10 * dpr}px serif`,
+    fillStyle: '#666666',
+    maxWidth: name.maxWidth,
+    x: name.x,
+    y: poster.height + (89.5 * dpr),
+  }
+
+  return {
+    systemInfo,
+    canvas,
+    poster,
+    miniCode,
+    avatar,
+    name,
+    desc,
+  }
+}

src/components/Poster/index.jsx

-import React, { useEffect, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import Taro from '@tarojs/taro'
-import { Canvas, View } from '@tarojs/components'
-import rtLog from '@/utils/rtLog'
-import { getConfig, getCanvas } from './sdk'
+import Modal from '@/components/Modal'
+import { authorize } from '@/utils/wxAuth'
+import { View, Image, Button } from '@tarojs/components'
+import Spin2 from '@/components/Spin/Spin2'
+import Poster from './Poster'
+import './style.scss'
 
 export default (props) => {
-  const { poster, miniCode, name, desc = '长按识别在线看房', onStart, onEnd } = props
+  const {
+    show,
+    dataSource,
+    onClose,
+    onSuccess,
+    title = '保存后分享图片',
+    btnText = '保存海报至相册',
+  } = props
 
-  const [posterData, setPosterData] = useState()
-  const [codeData, setCodeData] = useState()
-  const [canvas, setCanvas] = useState()
+  const [img, setImg] = useState()
+  const [processing, setProcessing] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const sdkRef = useRef()
 
-  useEffect(() => {
-    Taro.nextTick(() => {
-      getCanvas('#canvas-poster').then(setCanvas)
-    })
-  }, [])
+  const handlePoster = (url, sdk) => {
+    setImg(url)
+    setProcessing(false)
+    sdkRef.current = sdk
+  }
 
-  useEffect(() => {
-    if (poster) {
-      Taro.downloadFile({
-        url: poster,
-        success: (res) => {
-          if (res.statusCode === 200) {
-            setPosterData(res.tempFilePath)
-          }
-        },
-        fail: (err) => {
-          rtLog.error(err)
-          Taro.showToast({
-            title: '下载海报图出错',
-            icon: 'none',
-          })
-        }
-      })
-    }
-  }, [poster])
-  
-  useEffect(() => {
-    if (miniCode) {
-      Taro.downloadFile({
-        url: miniCode,
-        success: (res) => {
-          if (res.statusCode === 200) {
-            setCodeData(res.tempFilePath)
-          }
-        },
-        fail: (err) => {
-          rtLog.error(err)
-          Taro.showToast({
-            title: '下载海报二维码出错',
-            icon: 'none',
-          })
-        }
+  const handleSave = () => {
+    if (!img) {
+      Taro.showToast({
+        title: '海报未生成, 请稍后',
+        icon: 'none',
       })
+      return
     }
-  }, [miniCode])
 
-  useEffect(() => {
-    if (canvas && posterData && codeData) {
-      onStart()
-      const config = getConfig()
-      const dpr = config.systemInfo.pixelRatio
-      const ctx = canvas.getContext('2d')
-      canvas.width = config.canvas.width
-      canvas.height = config.canvas.height
-      ctx.scale(dpr, dpr)
+    authorize('scope.writePhotosAlbum').then(() => {
+      setLoading(true)
 
-      //
-    }
-  }, [canvas, posterData, codeData, onStart, onEnd])
+      // 先生成到临时位置
+      sdkRef.current.download().then((tempPath) => {
+        // 再保存到相册
+        Taro.saveImageToPhotosAlbum({
+          filePath: tempPath,
+          success: () => {
+            Taro.showToast({
+              title: '保存成功',
+              icon: 'none',
+              duration: 3000,
+            })
+            onSuccess()
+          },
+          fail: (err) => {
+            console.error(err)
+            const message = err.errMsg || err.message || err
+            Taro.showToast({
+              title: message,
+              icon: 'none',
+            })
+          },
+          complete: () => {
+            setLoading(false)
+          }
+        })
+      }).catch((err) => {
+        setLoading(false)
+        console.error(err)
+        const message = err.errMsg || err.message || err
+        Taro.showToast({
+          title: message,
+          icon: 'none',
+        })
+      })
+    }).catch((err) => {
+      console.error(err)
+      const message = err.errMsg || err.message || err
+      Taro.showToast({
+        title: message,
+        icon: 'none',
+      })
+    })
+  }
 
-  return <View style={{width: 0, height: 0}}><Canvas type='2d' id='canvas-poster' /></View>
+  return (
+    <Modal title={title} visible={show} onClose={onClose}>
+      <View className='modal-poster'>
+        <View className='modal-poster-img-box'>
+        {
+          !processing
+            ? <Image src={img} mode='scaleToFill' onClick={() => Taro.previewImage({ current: img, urls: [img] })} />
+            : <Spin2 spinning={processing} size={32} />
+        }
+        </View>
+        <Button className='modal-poster-action' onClick={handleSave} disabled={!img} loading={loading}>
+          {btnText}
+        </Button>
+      </View>
+      <Poster dataSource={dataSource} onStart={() => setProcessing(true)} onEnd={handlePoster} />
+    </Modal>
+  )
 }

src/components/Poster/sdk.js

 import Taro from '@tarojs/taro'
 
-/**
- * 获取配置
- * @returns 
- */
-export function getConfig() {
-  // https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.html
-  const systemInfo = Taro.getStorageSync('systemInfo')
-  const { windowWidth, pixelRatio } = systemInfo
+export default function factory(selector) {
+  return new Promise((resolve) => {
+    const query = Taro.createSelectorQuery()
+    query.select(selector)
+      .node((res) => {
+        const canvas = res.node
+        resolve(posterSDK(canvas))
+      })
+      .exec()
+  })
+}
 
-  // canvas
-  const canvas = {
-    width: windowWidth * pixelRatio,
-    // 设计稿宽高比 2.16  = height / width
-    height: windowWidth * pixelRatio * 2.16,
-  }
+export function posterSDK(canvas) {
+  let onError = (err) => console.error(err);
+  const ctx = canvas.getContext('2d')
+
+  /**
+   * 初始化 canvas
+   * @param {*} config 
+   */
+  function initCanvas(config) {
+    canvas.width = config.canvas.width
+    canvas.height = config.canvas.height
 
-  // 图片
-  const image = {
-    width: canvas.width,
-    height: canvas.width * 16 / 9, // 图片宽高 9 : 16
-    x: 0,
-    y: 0,
+    // 默认白色背景
+    ctx.fillStyle="#FFFFFF";
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+    ctx.save()
   }
 
-  // 头像
-  const avatar = {
-    width: 88,
-    height: 88,
-    x: 30,
-    y: image.height + 50,
+  /**
+   * 生成 canvas 可用 image
+   * @param {*} canvas 
+   * @param {*} url 
+   * @returns 
+   */
+  function getImage(url) {
+    return new Promise((resolve, reject) => {
+      Taro.downloadFile({
+        url,
+        success: (res) => {
+          if (res.statusCode === 200) {
+            const image = canvas.createImage()
+            image.onload = () => resolve(image)
+            image.onerror = (err) => {
+              onError('importImage', err)
+              reject(err)
+            }
+            image.src = res.tempFilePath
+          }
+        },
+        fail: (err) => {
+          onError('downloadImage', err)
+          reject(err)
+        }
+      })
+    })
   }
 
-  // 小程序码
-  const miniCode = {
-    width: 132,
-    height: 132,
-    x: canvas.width - 132 - 30,  // 128 是宽度, 30 是右边距
-    y: image.height + 50,
+  /**
+   * 绘制图像
+   * @param {*} ctx 
+   * @param {*} image 
+   * @param {*} conf 
+   */
+  function drawImage(image, conf) {
+    ctx.save()
+    if (conf.arc) {
+      // 圆心
+      const x = conf.x + conf.width / 2
+      const y = conf.y + conf.height / 2
+      const r = conf.width / 2
+      ctx.arc(x, y, r, 0, 2 * Math.PI)
+      ctx.clip()
+    }
+    
+    ctx.drawImage(image, conf.x, conf.y, conf.width, conf.height)
+    ctx.restore()
   }
 
-  // 姓名
-  const name = {
-    // https://developer.mozilla.org/zh-CN/docs/Web/CSS/font
-    font: '28px',
-    // https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fillStyle
-    fillStyle: '#333333',
+  /**
+   * 绘制文字
+   * @param {*} ctx 
+   * @param {*} text 
+   * @param {*} conf 
+   */
+  function darwText(text, conf) {
+    ctx.fillStyle = conf.fillStyle
+    ctx.font = conf.font
+    ctx.fillText(text, conf.x, conf.y, conf.maxWidth)
+  }
 
-    // 60 是头像左边距 + 小程序码右边距
-    // 40 是文字距离头像的左边距 20 + 距离小程序码的右边距 20
-    maxWidth: canvas.width - 60 - avatar.width - miniCode.width - 40,
+  /**
+   * canvas 转为图片
+   * @param {*} type 
+   * @param {*} encoderOptions 
+   * @returns 
+   */
+  function toDataURL(type = 'image/jpeg', encoderOptions = 0.8) {
+    return canvas.toDataURL(type, encoderOptions)
+  }
 
-    x: image.height + 66,
-    // 30 是头像左边距, 20 文字距离头像的左边距
-    y: 30 + avatar.width + 20,
+  /**
+   * 下载到本地
+   * @param {*} options 
+   * @returns 
+   */
+  function download(options) {
+    return new Promise((resovle, reject) => {
+      Taro.canvasToTempFilePath({
+        canvas,
+        fileType: 'jpg',
+        quality: 0.8,
+        ...(options || {}),
+        success: (res) => resovle(res.tempFilePath),
+        fail: (err) => {
+          onError('exportImage', err)
+          reject(err)
+        },
+      })
+    })
   }
 
-  // 说明
-  const desc = {
-    font: '20px',
-    fillStyle: '#666666',
-    maxWidth: name.maxWidth,
-    x: name.x,
-    y: image.height + 106,
+  function listenError(callback) {
+    onError = callback
   }
 
   return {
-    systemInfo,
     canvas,
-    image,
-    miniCode,
-    name,
-    desc,
+    ctx,
+    initCanvas,
+    download,
+    getImage,
+    drawImage,
+    darwText,
+    toDataURL,
+    onError: listenError,
   }
 }
-
-/**
- * 绘制图像
- * @param {*} ctx 
- * @param {*} image 
- * @param {*} config 
- */
-export function drawImage(ctx, image, config) {
-  ctx.drawImage(image, config.x, config.y, config.width, config.height)
-}
-
-/**
- * 绘制文字
- * @param {*} ctx 
- * @param {*} text 
- * @param {*} config 
- */
-export function darwText(ctx, text, config) {
-  ctx.setFillStyle(config.fillStyle)
-  ctx.font = config.font
-  ctx.fillText(text, config.x, config.y, config.maxWidth)
-}
-
-/**
- * 获取 canvas
- * @param {*} selector 
- * @returns 
- */
-export function getCanvas(selector) {
-  return new Promise((resolve) => {
-    const query = Taro.createSelectorQuery()
-    query.select(selector)
-      .node((res) => resolve(res.node))
-      .exec()
-  })
-}

src/components/Poster/style.scss

+.modal-poster {
+  width: 100vw;
+  height: calc(100vh - 62rpx);
+  box-sizing: border-box;
+  padding: 40rpx;
+
+  &-img-box {
+    flex: auto;
+    width: 70%;
+    height: calc(100% - 92rpx - 40rpx);
+    margin: 0 auto;
+    background: #fff;
+    box-shadow: 0 14rpx 24rpx 0 rgba(0, 0, 0, 0.2);
+    position: relative;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-action {
+    margin-top: 40rpx;
+    width: 100%;
+    height: 92rpx;
+    background: #193C83;
+    border-radius: 46rpx;
+    text-align: center;
+    color: #fff;
+    font-size: 30rpx;
+    font-weight: 600;
+    line-height: 90rpx;
+  }
+}

src/components/Spin/style.scss

 
   .spin2 {
     display: inline-block;
-    margin: auto;
     position: absolute;
+    left: 50%;
     top: 50%;
-    transform: translateY(-50%);
+    transform: translate(-50%, -50%);
   }
 }

src/pages/index/buildingDetail/components/DetailBottom/index.jsx

-import React from 'react'
+import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
 import { useSelector } from 'react-redux'
 import { Image } from '@tarojs/components'
 import './index.scss'
 
 export default function DetailBottom (props) {
-  const { Info = {} } = props
+  const { Info = {}, poster } = props
 
   // 当前推荐置业
   const { consultant } = useSelector(s => s.system)
+  const [showPoster, setShowPoster] = useState(false)
 
   const handleCall = () => {
     if (Info.tel) {
   return (
     <view>
       <view className='components DetailBottom flex-h'>
-        <view className='Item'>
+        <view className='Item' onClick={() => setShowPoster(true)}>
           <Image mode='heightFix' src={require('@/assets/buildingDetail-icon3.png')}></Image>
           <text>一键海报</text>
         </view>
           <text className='active' onClick={handleCall}>一键电话</text>
         </view>
       </view>
-      <Poster />
+
+      <Poster
+        show={showPoster}
+        dataSource={poster}
+        onClose={() => setShowPoster(false)}
+        onSuccess={() => setShowPoster(false)}
+      />
     </view>
   )
 }

src/pages/index/buildingDetail/index.jsx

-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import withLayout from '@/layout'
 import { ScrollView } from '@tarojs/components'
 import Disclaimer from '@/components/Disclaimer'
 import './index.scss'
 
 export default withLayout((props) => {
-  const { id } = props.router.params
+  const { router, person } = props
+  const { id } = router.params
 
   const [DetailInfo, setDetailInfo] = useState({})
   const [PictureList, setPictureList] = useState([])
   const [IsPull, setPull] = useState(false)
   const [PullTimer, setPullTimer] = useState(null)
 
+  const posterData = useMemo(() => {
+    if (!DetailInfo?.poster) {
+      return undefined
+    }
+
+    return {
+      name: person.name || person.nickname,
+      avatar: person.avatarurl,
+      poster: DetailInfo?.poster,
+      miniCode: DetailInfo?.poster,
+    }
+
+  }, [DetailInfo?.poster, person.avatarurl, person.name, person.nickname])
+
   useEffect(() => {
     // 获取楼盘信息
     fetch({ url: `${API_ITEMS_DETAIL}/${id}`, spin: true }).then((res) => {
       </view>
 
       <view className='PageBottom'>
-        <DetailBottom Info={DetailInfo}></DetailBottom>
+        <DetailBottom Info={DetailInfo} poster={posterData}></DetailBottom>
       </view>
-
     </view>
   )
 })

src/routes.js

     page: 'pages/index/buildingDetail/index',
     pkg: 'main',
     type: 'building',
+    auth: ['phone', 'avatar'],
   },
   {
     name: '楼盘信息',

src/utils/wxAuth.js

+import Taro from '@tarojs/taro'
+
+// https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html
+/**
+ * 微信授权
+ * @param {*} scope 
+ */
+export function authorize(scope) {
+  return new Promise((resolve, reject) => {
+    Taro.getSetting({
+      success: function (res) {
+        if (!res.authSetting[scope]) {
+          Taro.authorize({
+            scope,
+            success: resolve,
+            fail: reject,
+          })
+        } else {
+          resolve()
+        }
+      },
+      fail: reject,
+    })
+  })
+}