feats

src/components/Poster/Poster.jsx

@@ -1,94 +1,94 @@
-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'
+// 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
+// export default (props) => {
+//   const { dataSource, onStart, onEnd, onError } = props
 
-  const [sdk, setSDK] = useState()
-  const processing = useRef(false)
+//   const [sdk, setSDK] = useState()
+//   const processing = useRef(false)
 
-  const config = useRef()
-  config.current = getConfig()
+//   const config = useRef()
+//   config.current = getConfig()
 
-  useEffect(() => {
-    Taro.nextTick(() => {
-      posterSDKFactory('#canvas-poster').then((res) => {
-        res.initCanvas({
-          ...config.current,
-        })
-        setSDK(res)
-      })
-    })
-  }, [])
+//   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
+//   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)
-        }
-      })
+//       sdk.onError((err) => {
+//         if (onError) {
+//           onError(err)
+//         } else {
+//           console.error(err)
+//         }
+//       })
 
-      // 名称
-      sdk.darwText(name, conf.name)
-      // 小程序码
-      sdk.darwText(desc, conf.desc)
+//       // 名称
+//       sdk.darwText(name, conf.name)
+//       // 小程序码
+//       sdk.darwText(desc, conf.desc)
 
-      let cnt = 0
-      // 封面
-      sdk.getImage(poster).then((posterImg) => {
-        sdk.drawImage(posterImg, conf.poster)
-        cnt += 1
-      }).catch(() => cnt += 1)
-      // 头像
-      sdk.getImage(avatar).then((avatarImg) => {
-        sdk.drawImage(avatarImg, conf.avatar)
-        cnt += 1
-      }).catch(() => cnt += 1)
-      // 小程序码
-      sdk.getImage(miniCode).then((miniCodeImg) => {
-        sdk.drawImage(miniCodeImg, conf.miniCode)
-        cnt += 1
-      }).catch(() => cnt += 1)
+//       let cnt = 0
+//       // 封面
+//       sdk.getImage(poster).then((posterImg) => {
+//         sdk.drawImage(posterImg, conf.poster)
+//         cnt += 1
+//       }).catch(() => cnt += 1)
+//       // 头像
+//       sdk.getImage(avatar).then((avatarImg) => {
+//         sdk.drawImage(avatarImg, conf.avatar)
+//         cnt += 1
+//       }).catch(() => cnt += 1)
+//       // 小程序码
+//       sdk.getImage(miniCode).then((miniCodeImg) => {
+//         sdk.drawImage(miniCodeImg, conf.miniCode)
+//         cnt += 1
+//       }).catch(() => cnt += 1)
 
-      const ticker = setInterval(() => {
-        if (cnt >= 3) {
-          // 图片全部处理完
-          // // console.log('--------download--------->')
-          // sdk.download('canvas-poster').then((tempPath) => {
-          //   onEnd(tempPath, sdk)
-          //   clearInterval(ticker)
-          // }).catch(() => {
-          //   clearInterval(ticker)
-          // })
+//       const ticker = setInterval(() => {
+//         if (cnt >= 3) {
+//           // 图片全部处理完
+//           // // console.log('--------download--------->')
+//           // sdk.download('canvas-poster').then((tempPath) => {
+//           //   onEnd(tempPath, sdk)
+//           //   clearInterval(ticker)
+//           // }).catch(() => {
+//           //   clearInterval(ticker)
+//           // })
 
-          // const image = sdk.toDataURL();
-          // Taro.getImageInfo({
-          //   src: image,
-          //   success: (res => {
-          //     onEnd(res.path, sdk)
-          //     clearInterval(ticker)
-          //   })
-          // })
+//           // const image = sdk.toDataURL();
+//           // Taro.getImageInfo({
+//           //   src: image,
+//           //   success: (res => {
+//           //     onEnd(res.path, sdk)
+//           //     clearInterval(ticker)
+//           //   })
+//           // })
 
-          const image = sdk.toDataURL()
-          onEnd(image, sdk)
-          clearInterval(ticker)
-        }
-      }, 200);
+//           const image = sdk.toDataURL()
+//           onEnd(image, sdk)
+//           clearInterval(ticker)
+//         }
+//       }, 200);
 
-    }
-  }, [sdk, dataSource, onStart, onEnd, onError])
+//     }
+//   }, [sdk, dataSource, onStart, onEnd, onError])
 
-  return <View style={{ width: '1px', height: '1px' }}><Canvas type='2d' id='canvas-poster' /></View>
-}
+//   return <View style={{ width: '1px', height: '1px' }}><Canvas type='2d' id='canvas-poster' /></View>
+// }

src/components/Poster/index.jsx

@@ -1,9 +1,10 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Taro from '@tarojs/taro'
-import { View, Image, Button } from '@tarojs/components'
+import { View, Image, Button, Canvas } from '@tarojs/components'
 import Spin2 from '@/components/Spin/Spin2'
-import { save2Album } from '@/utils/image'
-import Poster from './Poster'
+import { save2Album, base64ToFile } from '@/utils/image'
+// import Poster from './Poster'
+import useCanvas from './useCanvas'
 import './style.scss'
 
 export default (props) => {
@@ -19,13 +20,19 @@ export default (props) => {
   const [img, setImg] = useState()
   const [processing, setProcessing] = useState(false)
   const [loading, setLoading] = useState(false)
-  const sdkRef = useRef()
+  const [canvasInited, setCanvasInited] = useState(false)
+  const posterRender = useRef()
 
-  const handlePoster = (url, sdk) => {
-    setImg(url)
-    setProcessing(false)
-    sdkRef.current = sdk
-  }
+  useCanvas('canvas-poster', (fn) => {
+    posterRender.current = fn
+    setCanvasInited(true)
+  })
+
+  // const handlePoster = (url, sdk) => {
+  //   setImg(url)
+  //   setProcessing(false)
+  //   sdkRef.current = sdk
+  // }
 
   const handleSave = () => {
     if (!img) {
@@ -38,57 +45,84 @@ export default (props) => {
 
     // 保存到相册
     setLoading(true)
-    // save2Album(img).then(() => {
-    //   setLoading(false)
-    //   onSuccess()
-    //   Taro.showToast({ title: '保存成功', icon: 'none' })
-    // }, () => setLoading(false))
-    sdkRef.current.download().then((tempPath) => {
-      console.log('------poster----tempPath---', tempPath, new Date().valueOf())
+    save2Album(img).then(() => {
+      setLoading(false)
+      onSuccess()
+      Taro.showToast({ title: '保存成功', icon: 'none' })
+    }, () => setLoading(false))
 
-      Taro.previewImage({
-        urls: [tempPath]
-      })
+    // sdkRef.current.download().then((tempPath) => {
+    //   console.log('------poster----tempPath---', tempPath, new Date().valueOf())
 
-      // save2Album(tempPath).then(() => {
-      //   setLoading(false)
-      //   onSuccess()
-      //   Taro.showToast({ title: '保存成功', icon: 'none' })
-      // }, () => setLoading(false))
-    }).catch((err) => {
-      setLoading(false)
-      console.error(err)
-      const message = err.errMsg || err.message || err
-      Taro.showToast({
-        title: message,
-        icon: 'none',
-      })
-    })
+    //   Taro.previewImage({
+    //     urls: [tempPath]
+    //   })
+
+    //   // save2Album(tempPath).then(() => {
+    //   //   setLoading(false)
+    //   //   onSuccess()
+    //   //   Taro.showToast({ title: '保存成功', icon: 'none' })
+    //   // }, () => setLoading(false))
+    // }).catch((err) => {
+    //   setLoading(false)
+    //   console.error(err)
+    //   const message = err.errMsg || err.message || err
+    //   Taro.showToast({
+    //     title: message,
+    //     icon: 'none',
+    //   })
+    // })
   }
 
   const handleImage = (e) => {
     Taro.previewImage({ current: img, urls: [img], showmenu: true })
   }
 
+  useEffect(() => {
+    if (dataSource && canvasInited) {
+      const getPoster = posterRender.current
+      setProcessing(true)
+      getPoster(dataSource).then((image) => {
+        // 生成临时文件
+        const base64 = image.split('base64,')[1]
+        base64ToFile(base64).then((tmpFile) => {
+          setImg(tmpFile)
+          setProcessing(false)
+        }).catch((err) => {
+          setProcessing(false)
+          Taro.showToast({
+            title: err.errMsg,
+            icon: 'none',
+          })
+        })
+      }).catch(() => {
+        setProcessing(false)
+      })
+    }
+  }, [dataSource, canvasInited])
+
   return (
     // <Modal title={title} visible={show} onClose={onClose}>
     // eslint-disable-next-line react/jsx-no-undef
-    <page-modal show={show} position='bottom' onClose={onClose} height='70vh'>
-      <View className='modal-poster'>
-        <View className='modal-poster-img-box'>
-          <view>
-            {
-              !processing
-                ? <Image src={img} mode='scaleToFill' className='centerLabel' onClick={handleImage} />
-                : <Spin2 className='centerLabel' spinning={processing} size={32} />
-            }
-          </view>
+    <>
+      <page-modal show={show} position='bottom' onClose={onClose} height='70vh'>
+        <View className='modal-poster'>
+          <View className='modal-poster-img-box'>
+            <view>
+              {
+                !processing
+                  ? <Image src={img} mode='scaleToFill' className='centerLabel' onClick={handleImage} />
+                  : <Spin2 className='centerLabel' spinning={processing} size={32} />
+              }
+            </view>
+          </View>
+          <Button className='modal-poster-action' onClick={handleSave} disabled={!img} loading={loading}>
+            {btnText}
+          </Button>
         </View>
-        <Button className='modal-poster-action' onClick={handleSave} disabled={!img} loading={loading}>
-          {btnText}
-        </Button>
-      </View>
-      <Poster dataSource={dataSource} onStart={() => setProcessing(true)} onEnd={handlePoster} />
-    </page-modal>
+        {/* <Poster dataSource={dataSource} onStart={() => setProcessing(true)} onEnd={handlePoster} /> */}
+      </page-modal>
+      <View style={{ width: '1px', height: '1px' }}><Canvas type='2d' id='canvas-poster' /></View>
+    </>
   )
 }

src/components/Poster/sdk.js

@@ -1,7 +1,5 @@
 import Taro from '@tarojs/taro'
 
-const sysInfo = Taro.getSystemInfoSync()
-
 export default function factory(selector) {
   return new Promise((resolve) => {
     const query = Taro.createSelectorQuery()
@@ -16,7 +14,7 @@ export default function factory(selector) {
 
 export function posterSDK(canvas) {
   let dpr;
-  let onError = (err) => console.error(err);
+  let onError = (...err) => console.error(...err);
   const ctx = canvas.getContext('2d')
 
   /**
@@ -100,12 +98,10 @@ export function posterSDK(canvas) {
 
   /**
    * canvas 转为图片
-   * @param {*} type 
-   * @param {*} encoderOptions 
    * @returns 
    */
-  function toDataURL(type = 'image/jpeg', encoderOptions = 0.8) {
-    return canvas.toDataURL(type, encoderOptions)
+  function toDataURL() {
+    return canvas.toDataURL()
   }
 
   /**
@@ -113,10 +109,9 @@ export function posterSDK(canvas) {
    * @param {*} options 
    * @returns 
    */
-  function download(canvasId) {
+  function download() {
     return new Promise((resovle, reject) => {
       Taro.canvasToTempFilePath({
-        canvasId,
         canvas,
         fileType: 'png',
         quality: 0.9,
@@ -124,8 +119,8 @@ export function posterSDK(canvas) {
         y: 0,
         width: canvas.width,
         height: canvas.height,
-        destWidth: canvas.width,
-        destHeight: canvas.height,
+        destWidth: canvas.width * 750 / dpr,
+        destHeight: canvas.height * 750 / dpr,
         success: (res) => resovle(res.tempFilePath),
         fail: (err) => {
           onError('exportImage', err)

src/components/Poster/useCanvas.js

@@ -0,0 +1,72 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import Taro from '@tarojs/taro'
+
+import { getConfig } from './config'
+import posterSDKFactory from './sdk'
+
+export default (canvasId, callback) => {
+
+  const config = useMemo(() => getConfig(), [])
+  const sdkRef = useRef()
+  const cbRef = useRef()
+
+  cbRef.current = callback
+
+  const getPoster = useCallback((dataSource) => {
+    const sdk = sdkRef.current
+    if (!sdk) {
+      return Promise.reject('系统未初始化完成, 请重试')
+    }
+
+    return new Promise((resolve, reject) => {
+      const { poster, miniCode, name, avatar, desc = '长按识别在线看房',  } = dataSource || {}
+
+      // 名称
+      sdk.darwText(name, config.name)
+      // 小程序码
+      sdk.darwText(desc, config.desc)
+
+      let cnt = 0
+      // 封面
+      sdk.getImage(poster).then((posterImg) => {
+        sdk.drawImage(posterImg, config.poster)
+        cnt += 1
+      }).catch(() => cnt += 1)
+      // 头像
+      sdk.getImage(avatar).then((avatarImg) => {
+        sdk.drawImage(avatarImg, config.avatar)
+        cnt += 1
+      }).catch(() => cnt += 1)
+      // 小程序码
+      sdk.getImage(miniCode).then((miniCodeImg) => {
+        sdk.drawImage(miniCodeImg, config.miniCode)
+        cnt += 1
+      }).catch(() => cnt += 1)
+
+      const ticker = setInterval(() => {
+        if (cnt >= 3) {
+          const image = sdk.toDataURL()
+          clearInterval(ticker)
+          resolve(image)
+        }
+      }, 200);
+    })
+  }, [config])
+
+  useEffect(() => {
+    Taro.nextTick(() => {
+      posterSDKFactory(`#${canvasId}`).then((sdk) => {
+        sdk.initCanvas({
+          ...config,
+        })
+        sdkRef.current = sdk
+        
+        if (cbRef.current) {
+          cbRef.current(getPoster)
+        }
+      })
+    })
+  }, [canvasId, config, getPoster])
+
+  return;
+}

src/utils/image.js

@@ -32,6 +32,34 @@ export function getImgURL(img) {
   return `${host}${img}`;
 }
 
+/**
+ * base64 转文件
+ * @param {*} base64Str 
+ * @returns 
+ */
+export function base64ToFile(base64Str) {
+  return new Promise((resolve, reject) => {
+    const fileName = (new Date()).valueOf() + '-' + Math.random().toString(36).substring(2) + '.png'
+    const filePath = Taro.env.USER_DATA_PATH + '/' + fileName
+  
+    Taro.getFileSystemManager().writeFile({
+      filePath,
+      data: base64Str,
+      encoding: 'base64',
+      success: () => {
+        resolve(filePath)
+      },
+      fail: (err) => {
+        console.error(err)
+        reject(err)
+      },
+      complete: (res) => {
+        console.log('-----writeFile---', filePath, res)
+      }
+    })
+  })
+}
+
 /**
  * 保存到相册
  * @param {*} tempPath