feat(app): uni.canvasGetImageData、uni.canvasSetImageData 数据增加压缩步骤，优化速度

package.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "base64-arraybuffer": "^0.2.0",
     "intersection-observer": "^0.7.0",
+    "pako": "^1.0.11",
     "safe-area-insets": "^1.4.1"
   },
   "private": true,

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

@@ -801,16 +801,21 @@ export function canvasGetImageData ({
   width,
   height
 }, callbackId) {
-  var pageId = getCurrentPageId()
+  const pageId = getCurrentPageId()
   if (!pageId) {
     invoke(callbackId, {
       errMsg: 'canvasGetImageData:fail'
     })
     return
   }
-  var cId = canvasEventCallbacks.push(function (data) {
-    var imgData = data.data
+  const cId = canvasEventCallbacks.push(function (data) {
+    let imgData = data.data
     if (imgData && imgData.length) {
+      if (__PLATFORM__ === 'app-plus' && data.compressed) {
+        const pako = require('pako')
+        imgData = pako.inflateRaw(imgData)
+        delete data.compressed
+      }
       data.data = new Uint8ClampedArray(imgData)
     }
     invoke(callbackId, data)
@@ -842,13 +847,23 @@ export function canvasPutImageData ({
   var cId = canvasEventCallbacks.push(function (data) {
     invoke(callbackId, data)
   })
+  let compressed
+  if (__PLATFORM__ === 'app-plus') {
+    const pako = require('pako')
+    data = pako.deflateRaw(data, { to: 'string' })
+    compressed = true
+  } else {
     // fix ...
+    data = Array.prototype.slice.call(data)
+  }
+
   operateCanvas(canvasId, pageId, 'putImageData', {
-    data: Array.prototype.slice.call(data),
+    data,
     x,
     y,
     width,
     height,
+    compressed,
     callbackId: cId
   })
 }

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

@@ -435,16 +435,24 @@ export default {
       context.drawImageByCanvas(canvas, x, y, width, height, 0, 0, destWidth, destHeight, false)
       let result
       try {
+        let compressed
         if (dataType === 'base64') {
           data = newCanvas.toDataURL(`image/${type}`, qualit)
         } else {
           const imgData = context.getImageData(0, 0, destWidth, destHeight)
+          if (__PLATFORM__ === 'app-plus') {
+            const pako = require('pako')
+            data = pako.deflateRaw(imgData.data, { to: 'string' })
+            compressed = true
+          } else {
             // fix [...]展开TypedArray在低版本手机报错的问题，使用Array.prototype.slice
             data = Array.prototype.slice.call(imgData.data)
           }
+        }
         result = {
           errMsg: 'canvasGetImageData:ok',
           data,
+          compressed,
           width: destWidth,
           height: destHeight
         }
@@ -470,6 +478,7 @@ export default {
       y,
       width,
       height,
+      compressed,
       callbackId
     }) {
       try {
@@ -478,6 +487,10 @@ export default {
         }
         const canvas = getTempCanvas(width, height)
         const context = canvas.getContext('2d')
+        if (__PLATFORM__ === 'app-plus' && compressed) {
+          const pako = require('pako')
+          data = pako.inflateRaw(data)
+        }
         context.putImageData(new ImageData(new Uint8ClampedArray(data), width, height), 0, 0)
         this.$refs.canvas.getContext('2d').drawImage(canvas, x, y, width, height)
         canvas.height = canvas.width = 0

yarn.lock

@@ -7680,6 +7680,11 @@ p-try@^2.0.0:
   resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+pako@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
 pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"