feats

src/components/taro-plugin-canvas/index.js

@@ -1,15 +1,10 @@
-import Taro, { Component } from '@tarojs/taro';
+import Taro, { Component } from "@tarojs/taro";
 // import PropTypes from 'prop-types';
-import { Canvas } from '@tarojs/components';
-import { randomString, getHeight, downloadImageAndInfo } from './utils/tools';
-import {
-  drawImage,
-  drawText,
-  drawBlock,
-  drawLine,
-} from './utils/draw';
-import './index.css';
-import rtLog from '@/utils/rtLog';
+import { Canvas } from "@tarojs/components";
+import { randomString, getHeight, downloadImageAndInfo } from "./utils/tools";
+import { drawImage, drawText, drawBlock, drawLine } from "./utils/draw";
+import "./index.css";
+import rtLog from "@/utils/rtLog";
 
 let count = 1;
 export default class CanvasDrawer extends Component {
@@ -26,8 +21,8 @@ export default class CanvasDrawer extends Component {
       pxWidth: 0,
       pxHeight: 0,
       debug: false,
-      factor: 0,
-    }
+      factor: 0
+    };
     this.canvasId = randomString(10);
     this.ctx = null;
     this.cache = {};
@@ -46,12 +41,12 @@ export default class CanvasDrawer extends Component {
       const screenWidth = sysInfo.screenWidth;
       this.setState({
         factor: screenWidth / 750
-      })
+      });
       this.onCreate();
-    }, 0)
+    }, 0);
   }
 
-  componentWillUnmount() { }
+  componentWillUnmount() {}
 
   /**
    * @description rpx => px 基础方法
@@ -65,7 +60,7 @@ export default class CanvasDrawer extends Component {
       return parseInt(rpx * factor);
     }
     return rpx * factor;
-  }
+  };
   /**
    * @description px => rpx
    * @param { number } px - 需要转换的数值
@@ -78,7 +73,7 @@ export default class CanvasDrawer extends Component {
       return parseInt(px / factor);
     }
     return px / factor;
-  }
+  };
 
   /**
    * @description 下载图片并获取图片信息
@@ -88,19 +83,22 @@ export default class CanvasDrawer extends Component {
   _downloadImageAndInfo = (image, index) => {
     return new Promise((resolve, reject) => {
       downloadImageAndInfo(image, index, this.toRpx)
-      .then(
-        (result) => {
+        .then(result => {
           this.drawArr.push(result);
           resolve();
-        }
-      )
-      .catch(err => {
-        console.log(err);
-        rtLog.error('下载图片失败, 图片地址 ('+ image +'), 错误消息: ' + ( err.message || err.errMsg || err))
-        reject(err)
-      });
-    })
-  }
+        })
+        .catch(err => {
+          console.log(err);
+          rtLog.error(
+            "下载图片失败, 图片地址 (" +
+              (image && image.url ? image.url : "无") +
+              "), 错误消息: " +
+              (err.message || err.errMsg || err)
+          );
+          reject(err);
+        });
+    });
+  };
   /**
    * @param  {} images=[]
    */
@@ -108,10 +106,12 @@ export default class CanvasDrawer extends Component {
     const drawList = [];
     let imagesTemp = images;
 
-    imagesTemp.forEach((image, index) => drawList.push(this._downloadImageAndInfo(image, index)));
+    imagesTemp.forEach((image, index) =>
+      drawList.push(this._downloadImageAndInfo(image, index))
+    );
 
     return Promise.all(drawList);
-  }
+  };
 
   /**
    * @param
@@ -124,17 +124,17 @@ export default class CanvasDrawer extends Component {
           .then(() => {
             resolve();
           })
-          .catch((e) => {
+          .catch(e => {
             console.log(e);
-            reject(e)
+            reject(e);
           });
       } else {
-        setTimeout(()=>{
+        setTimeout(() => {
           resolve(1);
-        }, 500)
+        }, 500);
       }
-    })
-  }
+    });
+  };
 
   /**
    * @param  {} w
@@ -142,53 +142,61 @@ export default class CanvasDrawer extends Component {
    * @param  {} debug
    */
   initCanvas = (w, h, debug) => {
-    return new Promise((resolve) => {
-      console.debug('-----------start to init canvas state------------')
-      this.setState({
-        pxWidth: this.toPx(w),
-        pxHeight: this.toPx(h),
-        debug,
-      }, () => {
-        console.debug('-----------finish init canvas state------------')
-        resolve()
-      });
+    return new Promise(resolve => {
+      console.debug("-----------start to init canvas state------------");
+      this.setState(
+        {
+          pxWidth: this.toPx(w),
+          pxHeight: this.toPx(h),
+          debug
+        },
+        () => {
+          console.debug("-----------finish init canvas state------------");
+          resolve();
+        }
+      );
     });
-  }
+  };
   /**
    * @param  { boolean }
    */
   onCreate = () => {
     const { onCreateFail, config } = this.props;
-    Taro.showLoading({ mask: true, title: '生成中...' });
-    console.debug('-----start to download images---')
-      return this.downloadResourceTransit()
+    Taro.showLoading({ mask: true, title: "生成中..." });
+    console.debug("-----start to download images---");
+    return this.downloadResourceTransit()
       .then(() => {
-        console.debug('-----finish download images---')
+        console.debug("-----finish download images---");
         this.create(config);
       })
-      .catch((err) => {
+      .catch(err => {
         Taro.hideLoading();
-        Taro.showToast({ icon: 'none', title: err.message || err.errMsg || '下载图片失败' });
+        Taro.showToast({
+          icon: "none",
+          title: err.message || err.errMsg || "下载图片失败"
+        });
         console.error(err);
         if (!onCreateFail) {
-          console.warn('您必须实现 taro-plugin-canvas 组件的 onCreateFail 方法，详见文档 https://github.com/chuyun/taro-plugin-canvas#fail');
+          console.warn(
+            "您必须实现 taro-plugin-canvas 组件的 onCreateFail 方法，详见文档 https://github.com/chuyun/taro-plugin-canvas#fail"
+          );
         }
         onCreateFail && onCreateFail(err);
-      })
-  }
+      });
+  };
 
   /**
    * @param  { object } config
    */
-  create = (config) => {
-    console.debug('-----create canvas---', this.canvasId, this.$scope)
+  create = config => {
+    console.debug("-----create canvas---", this.canvasId, this.$scope);
     this.ctx = Taro.createCanvasContext(this.canvasId, this.$scope);
-    console.debug('-----finish create canvas---')
+    console.debug("-----finish create canvas---");
     const height = getHeight(config);
-    console.debug('-----ready to init canvas---')
+    console.debug("-----ready to init canvas---");
     this.initCanvas(config.width, height, config.debug)
       .then(() => {
-        console.debug('-----finish init canvas---')
+        console.debug("-----finish init canvas---");
         // 设置画布底色
         if (config.backgroundColor) {
           this.ctx.save();
@@ -200,107 +208,119 @@ export default class CanvasDrawer extends Component {
           texts = [],
           // images = [],
           blocks = [],
-          lines = [],
+          lines = []
         } = config;
         const queue = this.drawArr
-          .concat(texts.map((item) => {
-            item.type = 'text';
-            item.zIndex = item.zIndex || 0;
-            return item;
-          }))
-          .concat(blocks.map((item) => {
-            item.type = 'block';
-            item.zIndex = item.zIndex || 0;
-            return item;
-          }))
-          .concat(lines.map((item) => {
-            item.type = 'line';
-            item.zIndex = item.zIndex || 0;
-            return item;
-          }));
+          .concat(
+            texts.map(item => {
+              item.type = "text";
+              item.zIndex = item.zIndex || 0;
+              return item;
+            })
+          )
+          .concat(
+            blocks.map(item => {
+              item.type = "block";
+              item.zIndex = item.zIndex || 0;
+              return item;
+            })
+          )
+          .concat(
+            lines.map(item => {
+              item.type = "line";
+              item.zIndex = item.zIndex || 0;
+              return item;
+            })
+          );
         // 按照顺序排序
         queue.sort((a, b) => a.zIndex - b.zIndex);
 
-        queue.forEach((item) => {
+        queue.forEach(item => {
           let drawOptions = {
             ctx: this.ctx,
             toPx: this.toPx,
-            toRpx: this.toRpx,
-          }
-          if (item.type === 'image') {
-            drawImage(item,drawOptions)
-          } else if (item.type === 'text') {
-            drawText(item,drawOptions)
-          } else if (item.type === 'block') {
-            drawBlock(item,drawOptions)
-          } else if (item.type === 'line') {
-            drawLine(item,drawOptions)
+            toRpx: this.toRpx
+          };
+          if (item.type === "image") {
+            drawImage(item, drawOptions);
+          } else if (item.type === "text") {
+            drawText(item, drawOptions);
+          } else if (item.type === "block") {
+            drawBlock(item, drawOptions);
+          } else if (item.type === "line") {
+            drawLine(item, drawOptions);
           }
         });
 
         const res = Taro.getSystemInfoSync();
         const platform = res.platform;
         let time = 0;
-        if (platform === 'android') {
+        if (platform === "android") {
           // 在安卓平台，经测试发现如果海报过于复杂在转换时需要做延时，要不然样式会错乱
           time = 300;
         }
-        console.debug('-----start to draw---')
+        console.debug("-----start to draw---");
         this.ctx.draw(false, () => {
-          console.debug('-----finish draw---')
+          console.debug("-----finish draw---");
           setTimeout(() => {
-            console.debug('-----ready to read file---')
+            console.debug("-----ready to read file---");
             this.getTempFile();
           }, time);
         });
       })
-      .catch((err) => {
-        Taro.showToast({ icon: 'none', title: err.errMsg || '生成失败' });
+      .catch(err => {
+        Taro.showToast({ icon: "none", title: err.errMsg || "生成失败" });
         console.error(err);
       });
-  }
+  };
 
-  getTempFile = (otherOptions) => {
+  getTempFile = otherOptions => {
     const { onCreateSuccess, onCreateFail } = this.props;
-    Taro.canvasToTempFilePath({
-      canvasId: this.canvasId,
-      success: (result) => {
-        console.debug('-----read file success---')
-        if (!onCreateSuccess) {
-          console.warn('您必须实现 taro-plugin-canvas 组件的 onCreateSuccess 方法，详见文档 https://github.com/chuyun/taro-plugin-canvas#success');
-        }
-        onCreateSuccess && onCreateSuccess(result);
-      },
-      fail: (error) => {
-        const { errMsg } = error;
-        console.log(errMsg)
-        if (errMsg === 'canvasToTempFilePath:fail:create bitmap failed') {
-          count += 1;
-          if (count <= 3) {
-            this.getTempFile(otherOptions);
-          } else {
-            if (!onCreateFail) {
-              console.warn('您必须实现 taro-plugin-canvas 组件的 onCreateFail 方法，详见文档 https://github.com/chuyun/taro-plugin-canvas#fail');
+    Taro.canvasToTempFilePath(
+      {
+        canvasId: this.canvasId,
+        success: result => {
+          console.debug("-----read file success---");
+          if (!onCreateSuccess) {
+            console.warn(
+              "您必须实现 taro-plugin-canvas 组件的 onCreateSuccess 方法，详见文档 https://github.com/chuyun/taro-plugin-canvas#success"
+            );
+          }
+          onCreateSuccess && onCreateSuccess(result);
+        },
+        fail: error => {
+          const { errMsg } = error;
+          console.log(errMsg);
+          if (errMsg === "canvasToTempFilePath:fail:create bitmap failed") {
+            count += 1;
+            if (count <= 3) {
+              this.getTempFile(otherOptions);
+            } else {
+              if (!onCreateFail) {
+                console.warn(
+                  "您必须实现 taro-plugin-canvas 组件的 onCreateFail 方法，详见文档 https://github.com/chuyun/taro-plugin-canvas#fail"
+                );
+              }
+              onCreateFail && onCreateFail(error);
             }
-            onCreateFail && onCreateFail(error);
           }
         }
       },
-    }, this.$scope);
-  }
+      this.$scope
+    );
+  };
 
   render() {
     const { pxWidth, pxHeight, debug } = this.state;
-    if(pxWidth && pxHeight){
+    if (pxWidth && pxHeight) {
       return (
         <Canvas
           canvas-id={this.canvasId}
           style={`width:${pxWidth}px; height:${pxHeight}px;`}
-          className={`${debug ? 'debug' : 'pro'} canvas`}
+          className={`${debug ? "debug" : "pro"} canvas`}
         />
       );
     }
     return null;
   }
 }
-