feat(h5): 增加canvasToTempFilePath api

NervJS · Apr 2, 2019 · 3764452 · 3764452
1 parent 56e8843
commit 3764452
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/packages/taro-components/src/utils/touchable.js b/packages/taro-components/src/utils/touchable.js
@@ -16,23 +16,24 @@ const touchable = (opt = {
       }
       timer = null
 
-      onTouchStart () {
+      onTouchStart = () => {
         const { bindTouchStart, bindLongTap } = this.props
         bindTouchStart && bindTouchStart()
-        setTimeout(() => {
+        this.timer = setTimeout(() => {
           bindLongTap && bindLongTap()
         }, opt.longTapTime)
       }
-      onTouchMove () {
+      onTouchMove = () => {
+        this.timer && clearTimeout(this.timer)
         const { bindTouchMove } = this.props
         bindTouchMove && bindTouchMove()
       }
-      onTouchEnd () {
+      onTouchEnd = () => {
         this.timer && clearTimeout(this.timer)
         const { bindTouchEnd } = this.props
         bindTouchEnd && bindTouchEnd()
       }
-      onTouchCancel () {
+      onTouchCancel = () => {
         this.timer && clearTimeout(this.timer)
         const { bindTouchCancel } = this.props
         bindTouchCancel && bindTouchCancel()

diff --git a/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js b/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js
@@ -1,3 +1,4 @@
+import { findDOMNode } from 'nervjs'
 /**
  * @typedef {Object} Param
  * @property {Number} [x] 指定的画布区域的左上角横坐标，默认值 0
@@ -17,10 +18,32 @@
 /**
  * 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
  * @param {Param} opt 参数
+ * @param {Object} componentInstance 在自定义组件下，当前组件实例的this，以操作组件内 <canvas> 组件
+ * @todo 暂未支持尺寸相关功能
  */
 
-const canvasToTempFilePath = opt => {
-
+const canvasToTempFilePath = ({ canvasId, fileType, success, fail, complete }, componentInstance) => {
+  const dom = findDOMNode(componentInstance)
+
+  /** @type {HTMLCanvasElement} */
+  const canvas = dom.querySelector(`[canvasId=${canvasId}]`);
+
+  try {
+    // /** @type {CanvasRenderingContext2D} */
+    const dataURL = canvas.toDataURL(`image/${fileType || 'png'}`, opt.quality)
+
+    success && success({
+      tempFilePath: dataURL
+    })
+  } catch (e) {
+    fail && fail({
+      errMsg: e.message
+    })
+  }
+  complete && complete({
+    res: 'canvasToTempFilePath:ok'
+  })
+
 }
 
 export default canvasToTempFilePath
diff --git a/packages/taro-h5/src/api/canvas/createCanvasContext.js b/packages/taro-h5/src/api/canvas/createCanvasContext.js
@@ -8,6 +8,7 @@ import { isFunction } from '../utils/index'
 */
 const createCanvasContext = (canvasId, componentInstance) => {
   const dom = findDOMNode(componentInstance)
+  /** @type {HTMLCanvasElement} */
   const canvas = dom.querySelector(`[canvasId=${canvasId}]`);
 
   /** @type {CanvasRenderingContext2D} */