feat(h5): canvas 高清处理

src/core/view/components/canvas/hidpi.js

+const pixelRatio = (function () {
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  const backingStore = context.backingStorePixelRatio ||
+        context.webkitBackingStorePixelRatio ||
+        context.mozBackingStorePixelRatio ||
+        context.msBackingStorePixelRatio ||
+        context.oBackingStorePixelRatio ||
+        context.backingStorePixelRatio || 1
+  return (window.devicePixelRatio || 1) / backingStore
+})()
+
+const forEach = function (obj, func) {
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      func(obj[key], key)
+    }
+  }
+}
+const ratioArgs = {
+  'fillRect': 'all',
+  'clearRect': 'all',
+  'strokeRect': 'all',
+  'moveTo': 'all',
+  'lineTo': 'all',
+  'arc': [0, 1, 2],
+  'arcTo': 'all',
+  'bezierCurveTo': 'all',
+  'isPointinPath': 'all',
+  'isPointinStroke': 'all',
+  'quadraticCurveTo': 'all',
+  'rect': 'all',
+  'translate': 'all',
+  'createRadialGradient': 'all',
+  'createLinearGradient': 'all',
+  'setTransform': [4, 5]
+}
+if (pixelRatio !== 1) {
+  const proto = CanvasRenderingContext2D.prototype
+
+  forEach(ratioArgs, function (value, key) {
+    proto[key] = (function (_super) {
+      return function () {
+        if (this.__ignore__) {
+          return _super.apply(this, arguments)
+        }
+
+        let args = Array.prototype.slice.call(arguments)
+
+        if (value === 'all') {
+          args = args.map(function (a) {
+            return a * pixelRatio
+          })
+        } else if (Array.isArray(value)) {
+          for (let i = 0; i < value.length; i++) {
+            args[value[i]] *= pixelRatio
+          }
+        }
+        return _super.apply(this, args)
+      }
+    })(proto[key])
+  })
+
+  proto.stroke = (function (_super) {
+    return function () {
+      if (this.__ignore__) {
+        return _super.apply(this, arguments)
+      }
+      this.lineWidth *= pixelRatio
+      _super.apply(this, arguments)
+      this.lineWidth /= pixelRatio
+    }
+  })(proto.stroke)
+
+  proto.fillText = (function (_super) {
+    return function () {
+      if (this.__ignore__) {
+        return _super.apply(this, arguments)
+      }
+      const args = Array.prototype.slice.call(arguments)
+
+      args[1] *= pixelRatio
+      args[2] *= pixelRatio
+
+      this.font = this.font.replace(
+        /(\d+)(px|em|rem|pt)/g,
+        function (w, m, u) {
+          return (m * pixelRatio) + u
+        }
+      )
+
+      _super.apply(this, args)
+
+      this.font = this.font.replace(
+        /(\d+)(px|em|rem|pt)/g,
+        function (w, m, u) {
+          return (m / pixelRatio) + u
+        }
+      )
+    }
+  })(proto.fillText)
+
+  proto.strokeText = (function (_super) {
+    return function () {
+      if (this.__ignore__) {
+        return _super.apply(this, arguments)
+      }
+      var args = Array.prototype.slice.call(arguments)
+
+      args[1] *= pixelRatio // x
+      args[2] *= pixelRatio // y
+
+      this.font = this.font.replace(
+        /(\d+)(px|em|rem|pt)/g,
+        function (w, m, u) {
+          return (m * pixelRatio) + u
+        }
+      )
+
+      _super.apply(this, args)
+
+      this.font = this.font.replace(
+        /(\d+)(px|em|rem|pt)/g,
+        function (w, m, u) {
+          return (m / pixelRatio) + u
+        }
+      )
+    }
+  })(proto.strokeText)
+
+  proto.drawImageByCanvas = (function (_super) {
+    return function (canvas, srcx, srcy, srcw, srch, desx, desy, desw, desh, isScale) {
+      if (this.__ignore__) {
+        return _super.apply(this, arguments)
+      }
+      srcx *= pixelRatio
+      srcy *= pixelRatio
+      srcw *= pixelRatio
+      srch *= pixelRatio
+      desx *= pixelRatio
+      desy *= pixelRatio
+      desw = isScale ? desw * pixelRatio : desw
+      desh = isScale ? desh * pixelRatio : desh
+      _super.call(this, canvas, srcx, srcy, srcw, srch, desx, desy, desw, desh)
+    }
+  })(proto.drawImage)
+
+  proto.drawImage = (function (_super) {
+    return function () {
+      if (this.__ignore__) {
+        return _super.apply(this, arguments)
+      }
+      this.scale(pixelRatio, pixelRatio)
+      _super.apply(this, arguments)
+      this.scale(1 / pixelRatio, 1 / pixelRatio)
+    }
+  })(proto.drawImage)
+}
+
+export function wrapper (canvas) {
+  canvas.style.height = canvas.height + 'px'
+  canvas.style.width = canvas.width + 'px'
+  canvas.width *= pixelRatio
+  canvas.height *= pixelRatio
+
+  console.log(canvas.width)
+  console.log(canvas.height)
+}

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

@@ -6,13 +6,10 @@
     <canvas
       ref="canvas"
       width="300"
-      height="150"/>
+      height="150" />
     <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;">
-      <slot/>
+      <slot />
     </div>
-    <v-uni-resize-sensor
-      ref="sensor"
-      @resize="_resize"/>
   </uni-canvas>
 </template>
 <script>
@@ -20,6 +17,10 @@ import {
   subscriber
 } from 'uni-mixins'
 
+import {
+  wrapper
+} from './hidpi'
+
 function resolveColor (color) {
   color = color.slice(0)
   color[3] = color[3] / 255
@@ -69,7 +70,8 @@ export default {
           eventHandler.push(($event) => {
             this.$trigger(event, Object.assign({}, $event, {
               touches: processTouches($event.currentTarget, $event.touches),
-              changedTouches: processTouches($event.currentTarget, $event.changedTouches)
+              changedTouches: processTouches($event.currentTarget, $event
+                .changedTouches)
             }))
           })
         }
@@ -87,8 +89,8 @@ export default {
   },
   mounted () {
     this._resize({
-      width: this.$refs.sensor.$el.offsetWidth,
-      height: this.$refs.sensor.$el.offsetHeight
+      width: this.$el.offsetWidth,
+      height: this.$el.offsetHeight
     })
   },
   methods: {
@@ -101,12 +103,16 @@ export default {
         method(data)
       }
     },
-    _resize ({ width, height }) {
+    _resize ({
+      width,
+      height
+    }) {
       var canvas = this.$refs.canvas
       if (canvas.width !== width || canvas.height !== height) {
         canvas.width = width
         canvas.height = height
       }
+      wrapper(canvas)
     },
     _touchmove (event) {
       event.preventDefault()
@@ -165,7 +171,8 @@ export default {
                 LinearGradient.addColorStop(offset, color)
               })
             } else if (data[0] === 'pattern') {
-              let loaded = this.checkImageLoaded(data[1], actions.slice(index + 1), callbackId, function (image) {
+              let loaded = this.checkImageLoaded(data[1], actions.slice(index + 1), callbackId,
+                function (image) {
                   if (image) {
                     c2d[method1] = c2d.createPattern(image, data[2])
                   }
@@ -217,9 +224,11 @@ export default {
             var url = dataArray[0]
             var otherData = dataArray.slice(1)
             self._images = self._images || {}
-            if (!self.checkImageLoaded(url, actions.slice(index + 1), callbackId, function (image) {
+            if (!self.checkImageLoaded(url, actions.slice(index + 1), callbackId, function (
+              image) {
               if (image) {
-                c2d.drawImage.apply(c2d, [image].concat([...otherData.slice(4, 8)], [...otherData.slice(0, 4)]))
+                c2d.drawImage.apply(c2d, [image].concat([...otherData.slice(4, 8)],
+                  [...otherData.slice(0, 4)]))
               }
             })) return 'break'
           }())
@@ -327,7 +336,8 @@ export default {
             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) {
+            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
@@ -413,7 +423,8 @@ export default {
         if (!height) {
           height = Math.round(data.length / 4 / width)
         }
-        this.$refs.canvas.getContext('2d').putImageData(new ImageData(new Uint8ClampedArray(data), width, height), x, y)
+        this.$refs.canvas.getContext('2d').putImageData(new ImageData(new Uint8ClampedArray(data), width,
+          height), x, y)
       } catch (error) {
         UniViewJSBridge.publishHandler('onCanvasMethodCallback', {
           callbackId,
@@ -434,17 +445,18 @@ export default {
 }
 </script>
 <style>
-uni-canvas {
+    uni-canvas {
         width: 300px;
         height: 150px;
         display: block;
         position: relative;
-}
-uni-canvas > canvas {
+    }
+
+    uni-canvas>canvas {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
-}
+    }
 </style>