feats

config/dev.js

@@ -3,8 +3,8 @@ module.exports = {
     NODE_ENV: '"development"'
   },
   defineConstants: {
-    HOST: '"https://xlk.njyz.tech"',
-    // HOST: '"https://www.newhousehold.cn"',
+    // HOST: '"https://xlk.njyz.tech"',
+    HOST: '"https://www.newhousehold.cn"',
     // HOST: '"http://127.0.0.1:8567"',
     WSS_HOST: '"wss://xlk.njyz.tech"',
     OSS_PATH: '"https://xlk-assets.oss-cn-shanghai.aliyuncs.com/"',

src/components/Poster/Poster.jsx

@@ -64,6 +64,23 @@ export default (props) => {
       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()
           onEnd(image, sdk)
           clearInterval(ticker)
@@ -73,5 +90,5 @@ export default (props) => {
     }
   }, [sdk, dataSource, onStart, onEnd, onError])
 
-  return <View style={{width: 0, height: 0}}><Canvas type='2d' id='canvas-poster' /></View>
+  return <View style={{ width: '1px', height: '1px' }}><Canvas type='2d' id='canvas-poster' /></View>
 }

src/components/Poster/config.js

@@ -1,4 +1,4 @@
-import Taro, { preloadData } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 
 /**
  * 获取配置
@@ -7,13 +7,13 @@ import Taro, { preloadData } from '@tarojs/taro'
 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
+  const { windowWidth } = systemInfo
 
   // canvas
   const canvas = {
-    width: windowWidth * dpr,
+    width: windowWidth,
     // 设计稿宽高比 2.16  = height / width
-    height: windowWidth * dpr * 2.16,
+    height: windowWidth * 2.16,
   }
 
   // 图片
@@ -24,31 +24,31 @@ export function getConfig() {
     y: 0,
   }
 
-  const marign = 22.5 * dpr;
-  const innerMargin = 15 * dpr
+  const marign = 22.5;
+  const innerMargin = 15
 
   // 头像
   const avatar = {
     arc: true,  // arc 代表裁剪为圆形
-    width: 66 * dpr,
-    height: 66 * dpr,
+    width: 66,
+    height: 66,
     x: marign,
-    y: poster.height + (39 * dpr),
+    y: poster.height + 39,
   }
 
   // 小程序码
   const miniCode = {
     arc: true,
-    width: 99 * dpr,
-    height: 99 * dpr,
-    x: canvas.width - (99 * dpr) - marign,  // 99 是宽度
-    y: poster.height + (20 * dpr),
+    width: 99,
+    height: 99,
+    x: canvas.width - 99 - marign,  // 99 是宽度
+    y: poster.height + 20,
   }
 
   // 姓名
   const name = {
     // https://developer.mozilla.org/zh-CN/docs/Web/CSS/font
-    font: `${15 * dpr}px serif`,
+    font: '15px serif',
     // https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fillStyle
     fillStyle: '#333333',
 
@@ -57,16 +57,16 @@ export function getConfig() {
     maxWidth: canvas.width - (marign * 2) - avatar.width - miniCode.width - (innerMargin * 2),
 
     x: marign + avatar.width + innerMargin,
-    y: poster.height + (65 * dpr),
+    y: poster.height + 65,
   }
 
   // 说明
   const desc = {
-    font: `${10 * dpr}px serif`,
+    font: '10px serif',
     fillStyle: '#666666',
     maxWidth: name.maxWidth,
     x: name.x,
-    y: poster.height + (89.5 * dpr),
+    y: poster.height + (89.5),
   }
 
   return {

src/components/Poster/index.jsx

@@ -38,12 +38,23 @@ export default (props) => {
 
     // 保存到相册
     setLoading(true)
+    // save2Album(img).then(() => {
+    //   setLoading(false)
+    //   onSuccess()
+    //   Taro.showToast({ title: '保存成功', icon: 'none' })
+    // }, () => setLoading(false))
     sdkRef.current.download().then((tempPath) => {
-      save2Album(tempPath).then(() => {
-        setLoading(false)
-        onSuccess()
-        Taro.showToast({ title: '保存成功', icon: 'none' })
-      }, () => setLoading(false))
+      console.log('------poster----tempPath---', tempPath, new Date().valueOf())
+
+      Taro.previewImage({
+        urls: [tempPath]
+      })
+
+      // save2Album(tempPath).then(() => {
+      //   setLoading(false)
+      //   onSuccess()
+      //   Taro.showToast({ title: '保存成功', icon: 'none' })
+      // }, () => setLoading(false))
     }).catch((err) => {
       setLoading(false)
       console.error(err)

src/components/Poster/sdk.js

@@ -1,5 +1,7 @@
 import Taro from '@tarojs/taro'
 
+const sysInfo = Taro.getSystemInfoSync()
+
 export default function factory(selector) {
   return new Promise((resolve) => {
     const query = Taro.createSelectorQuery()
@@ -13,6 +15,7 @@ export default function factory(selector) {
 }
 
 export function posterSDK(canvas) {
+  let dpr;
   let onError = (err) => console.error(err);
   const ctx = canvas.getContext('2d')
 
@@ -21,8 +24,11 @@ export function posterSDK(canvas) {
    * @param {*} config 
    */
   function initCanvas(config) {
-    canvas.width = config.canvas.width
-    canvas.height = config.canvas.height
+    dpr = config.systemInfo.pixelRatio;
+
+    canvas.width = config.canvas.width * dpr;
+    canvas.height = config.canvas.height * dpr;
+    ctx.scale(dpr, dpr);
 
     // 默认白色背景
     ctx.fillStyle="#FFFFFF";
@@ -107,13 +113,19 @@ export function posterSDK(canvas) {
    * @param {*} options 
    * @returns 
    */
-  function download(options) {
+  function download(canvasId) {
     return new Promise((resovle, reject) => {
       Taro.canvasToTempFilePath({
+        canvasId,
         canvas,
-        fileType: 'jpg',
-        quality: 0.8,
-        ...(options || {}),
+        fileType: 'png',
+        quality: 0.9,
+        x: 0,
+        y: 0,
+        width: canvas.width,
+        height: canvas.height,
+        destWidth: canvas.width,
+        destHeight: canvas.height,
         success: (res) => resovle(res.tempFilePath),
         fail: (err) => {
           onError('exportImage', err)

src/utils/image.js

@@ -40,6 +40,8 @@ export function getImgURL(img) {
 export function save2Album(tempPath) {
   return new Promise((resolve, reject) => {
     authorize('scope.writePhotosAlbum').then(() => {
+      console.log('-----------save2Album---------->', tempPath)
+
       // 再保存到相册
       Taro.saveImageToPhotosAlbum({
         filePath: tempPath,
@@ -57,6 +59,9 @@ export function save2Album(tempPath) {
             icon: 'none',
           })
           reject(err)
+        },
+        complete: (res) => {
+          console.log('---------complete----------->', res)
         }
       })
     }).catch((err) => {