feat: 实现API：uni.canvasGetImageData、uni.canvasPutImageData

src/core/helpers/protocol/canvas.js

+export const canvasGetImageData = {
+  canvasId: {
+    type: String,
+    required: true
+  },
+  x: {
+    type: Number,
+    required: true
+  },
+  y: {
+    type: Number,
+    required: true
+  },
+  width: {
+    type: Number,
+    required: true
+  },
+  height: {
+    type: Number,
+    required: true
+  }
+}
+
+export const canvasPutImageData = {
+  canvasId: {
+    type: String,
+    required: true
+  },
+  data: {
+    type: Uint8ClampedArray,
+    required: true
+  },
+  x: {
+    type: Number,
+    required: true
+  },
+  y: {
+    type: Number,
+    required: true
+  },
+  width: {
+    type: Number,
+    required: true
+  },
+  height: {
+    type: Number,
+    required: false
+  }
+}

src/core/helpers/protocol/context.js

@@ -2,8 +2,16 @@ const validator = [{
   name: 'id',
   type: String,
   required: true
-}]
+}]
 
 export const createAudioContext = validator
 export const createVideoContext = validator
-export const createMapContext = validator
+export const createMapContext = validator
+export const createCanvasContext = [{
+  name: 'canvasId',
+  type: String,
+  required: true
+}, {
+  name: 'componentInstance',
+  type: Object
+}]

src/core/service/api/context/canvas.js

@@ -3,12 +3,22 @@ import createCallbacks from 'uni-helpers/callbacks'
 const canvasEventCallbacks = createCallbacks('canvasEvent')
 
 UniServiceJSBridge.subscribe('onDrawCanvas', ({
-  reqId,
-  res
+  callbackId,
+  data
 }) => {
-  const callback = canvasEventCallbacks.pop(reqId)
+  const callback = canvasEventCallbacks.pop(callbackId)
   if (callback) {
-    callback(res)
+    callback(data)
+  }
+})
+
+UniServiceJSBridge.subscribe('onCanvasMethodCallback', ({
+  callbackId,
+  data
+}) => {
+  const callback = canvasEventCallbacks.pop(callbackId)
+  if (callback) {
+    callback(data)
   }
 })
 
@@ -559,3 +569,71 @@ export function createCanvasContext (id, context) {
     UniServiceJSBridge.emit('onError', 'createCanvasContext:fail')
   }
 }
+
+const {
+  invokeCallbackHandler: invoke
+} = UniServiceJSBridge
+
+export function canvasGetImageData ({
+  canvasId,
+  x,
+  y,
+  width,
+  height
+}, callbackId) {
+  var pageId
+  const app = getApp()
+  if (app.$route && app.$route.params.__id__) {
+    pageId = app.$route.params.__id__
+  } else {
+    invoke(callbackId, {
+      errMsg: 'canvasGetImageData:fail'
+    })
+    return
+  }
+  var cId = canvasEventCallbacks.push(function (data) {
+    var imgData = data.data
+    if (imgData && imgData.length) {
+      data.data = new Uint8ClampedArray(imgData)
+    }
+    invoke(callbackId, data)
+  })
+  operateCanvas(canvasId, pageId, 'getImageData', {
+    x,
+    y,
+    width,
+    height,
+    callbackId: cId
+  })
+}
+
+export function canvasPutImageData ({
+  canvasId,
+  data,
+  x,
+  y,
+  width,
+  height
+}, callbackId) {
+  var pageId
+  const app = getApp()
+  if (app.$route && app.$route.params.__id__) {
+    pageId = app.$route.params.__id__
+  } else {
+    invoke(callbackId, {
+      errMsg: 'canvasPutImageData:fail'
+    })
+    return
+  }
+  var cId = canvasEventCallbacks.push(function (data) {
+    invoke(callbackId, data)
+  })
+  operateCanvas(canvasId, pageId, 'putImageData', {
+    data: [...data],
+    x,
+    y,
+    width,
+    height,
+    callbackId: cId
+  })
+}

src/core/view/components/canvas/index.vue

@@ -198,8 +198,10 @@ export default {
       }
       if (!this.actionsWaiting && callbackId) {
         UniViewJSBridge.publishHandler('onDrawCanvas', {
-          errMsg: 'drawCanvas:ok',
-          callbackId
+          callbackId,
+          data: {
+            errMsg: 'drawCanvas:ok'
+          }
         }, this.$page.id)
       }
     },
@@ -316,6 +318,64 @@ export default {
         }
         return false
       }
+    },
+    getImageData ({
+      x,
+      y,
+      width,
+      height,
+      callbackId
+    }) {
+      var imgData
+      try {
+        imgData = this.$refs.canvas.getContext('2d').getImageData(x, y, width, height)
+      } catch (error) {
+        UniViewJSBridge.publishHandler('onCanvasMethodCallback', {
+          callbackId,
+          data: {
+            errMsg: 'canvasGetImageData:fail'
+          }
+        }, this.$page.id)
+        return
+      }
+      UniViewJSBridge.publishHandler('onCanvasMethodCallback', {
+        callbackId,
+        data: {
+          errMsg: 'canvasGetImageData:ok',
+          data: [...imgData.data],
+          width,
+          height
+        }
+      }, this.$page.id)
+    },
+    putImageData ({
+      data,
+      x,
+      y,
+      width,
+      height,
+      callbackId
+    }) {
+      try {
+        if (!height) {
+          height = data.length / 4 / width
+        }
+        this.$refs.canvas.getContext('2d').putImageData(new ImageData(new Uint8ClampedArray(data), width, height), x, y)
+      } catch (error) {
+        UniViewJSBridge.publishHandler('onCanvasMethodCallback', {
+          callbackId,
+          data: {
+            errMsg: 'canvasPutImageData:fail'
+          }
+        }, this.$page.id)
+        return
+      }
+      UniViewJSBridge.publishHandler('onCanvasMethodCallback', {
+        callbackId,
+        data: {
+          errMsg: 'canvasPutImageData:ok'
+        }
+      }, this.$page.id)
     }
   }
 }