fix: 解决canvas组件大小变化导致的异常以及跨域图像导出问题

src/core/helpers/tags.js

@@ -10,6 +10,7 @@ module.exports = [
   'uni-modal',
   'uni-picker',
   'uni-toast',
+  'uni-resize-sensor',
 
   'uni-ad',
   'uni-audio',
@@ -51,4 +52,4 @@ module.exports = [
   'uni-video',
   'uni-view',
   'uni-web-view'
-]
+]

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

@@ -8,6 +8,9 @@
       :height="height"
       @touchmove="_touchmove"
     />
+    <v-uni-resize-sensor
+      initial
+      @resize="_resize"/>
   </uni-canvas>
 </template>
 <script>
@@ -50,11 +53,6 @@ export default {
     this._actionsDefer = []
     this._images = {}
   },
-  mounted () {
-    var canvas = this.$refs.canvas
-    this.width = canvas.offsetWidth
-    this.height = canvas.offsetHeight
-  },
   methods: {
     _handleSubscribe ({
       type,
@@ -65,6 +63,10 @@ export default {
         method(data)
       }
     },
+    _resize ({ width, height }) {
+      this.width = width
+      this.height = height
+    },
     _touchmove (event) {
       if (this.disableScroll) {
         event.preventDefault()
@@ -236,7 +238,7 @@ export default {
            * @param {Blob} blob
            */
           function loadBlob (blob) {
-            sefl._images[src].src = window.URL.createObjectURL(blob)
+            sefl._images[src].src = (window.URL || window.webkitURL).createObjectURL(blob)
           }
           /**
            * 从本地文件加载
@@ -263,6 +265,8 @@ export default {
               }, function (d, status) {
                 if (status === 200) {
                   loadFile(d.filename)
+                } else {
+                  sefl._images[src].src = src
                 }
               }).start()
             }
@@ -274,20 +278,23 @@ export default {
                 loadBlob(this.response)
               }
             }
-            xhr.onerror = plusDownload
+            xhr.onerror = window.plus ? plusDownload : function () {
+              sefl._images[src].src = src
+            }
             xhr.send()
           }
-          // 解决 plus-app wkwebview 图像跨域问题
-          if (window.plus && window.webkit && window.webkit.messageHandlers) {
-            if (src.indexOf('http://') === 0 || src.indexOf('https://') === 0) {
-              loadUrl(src)
+
+          if (window.plus && (!window.webkit || !window.webkit.messageHandlers)) {
+            sefl._images[src].src = src
+          } else {
+            // 解决 PLUS-APP（wkwebview）以及 H5 图像跨域问题（H5图像响应头需包含access-control-allow-origin）
+            if (window.plus && src.indexOf('http://') !== 0 && src.indexOf('https://') !== 0) {
+              loadFile(src)
             } else if (/^data:[a-z-]+\/[a-z-]+;base64,/.test(src)) {
               sefl._images[src].src = src
             } else {
-              loadFile(src)
+              loadUrl(src)
             }
-          } else {
-            sefl._images[src].src = src
           }
         }
       })

src/core/view/components/resize-sensor/index.vue

+<script>
+export default {
+  name: 'ResizeSensor',
+  props: {
+    initial: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
+  data: function () {
+    return {
+      size: {
+        width: 0,
+        height: 0
+      }
+    }
+  },
+  watch: {
+    size: {
+      deep: true,
+      handler: function (size) {
+        this.reset()
+        this.$emit('resize', Object.assign({}, size))
+      }
+    }
+  },
+  beforeDestroy: function () {
+    this.$emit('resize', { width: 0, height: 0 })
+    this.$emit('resizeSensorBeforeDestroy')
+  },
+  mounted: function () {
+    if (this.initial === true) {
+      this.$nextTick(this.update)
+    }
+
+    if (this.$el.offsetParent !== this.$el.parentNode) {
+      this.$el.parentNode.style.position = 'relative'
+    }
+
+    if ('attachEvent' in this.$el && !('AnimationEvent' in window)) {
+      var onresizeHandler = function () {
+        this.update()
+        removeOnresizeEvent()
+      }.bind(this)
+
+      var removeOnresizeEvent = function () {
+        this.$el.detachEvent('onresize', onresizeHandler)
+        this.$off('resizeSensorBeforeDestroy', removeOnresizeEvent)
+      }.bind(this)
+
+      this.$el.attachEvent('onresize', onresizeHandler)
+      this.$on('resizeSensorBeforeDestroy', removeOnresizeEvent)
+      this.reset()
+    }
+  },
+  methods: {
+    reset: function () {
+      var expand = this.$el.firstChild
+      var shrink = this.$el.lastChild
+      expand.scrollLeft = 100000
+      expand.scrollTop = 100000
+      shrink.scrollLeft = 100000
+      shrink.scrollTop = 100000
+    },
+    update: function () {
+      this.size.width = this.$el.offsetWidth
+      this.size.height = this.$el.offsetHeight
+    }
+  },
+  render: function (create) {
+    return create('uni-resize-sensor', {
+      on: {
+        '~animationstart': this.update
+      }
+    }, [
+        create('div', {
+          on: {
+            scroll: this.update
+          }
+        }, [
+            create('div')
+          ]),
+        create('div', {
+          on: {
+            scroll: this.update
+          }
+        }, [
+            create('div')
+          ])
+      ])
+  }
+}
+
+</script>
+
+<style>
+@keyframes resizeSensorVisibility {
+  from {
+    top: 0;
+  }
+}
+uni-resize-sensor,
+uni-resize-sensor > div {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+uni-resize-sensor {
+  display: block;
+  z-index: -1;
+  visibility: hidden;
+  animation-name: resizeSensorVisibility;
+}
+uni-resize-sensor > div > div {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+uni-resize-sensor > div:first-child > div {
+  width: 100000px;
+  height: 100000px;
+}
+uni-resize-sensor > div:last-child > div {
+  width: 200%;
+  height: 200%;
+}
+</style>