update: H5 高清canvas canvasToTempFilePath模糊问题.

src/core/view/components/canvas/hidpi.js → src/core/helpers/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
+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)
+  console.log(canvas.height)
 }

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

 import createCallbacks from 'uni-helpers/callbacks'
+import { wrapper } from 'uni-helpers/hidpi'
 
 const canvasEventCallbacks = createCallbacks('canvasEvent')
 
@@ -257,6 +258,7 @@ var tempCanvas
 function getTempCanvas () {
   if (!tempCanvas) {
     tempCanvas = document.createElement('canvas')
+    wrapper(tempCanvas)
   }
   return tempCanvas
 }
@@ -816,7 +818,7 @@ export function canvasToTempFilePath ({
     pageId = app.$route.params.__id__
   } else {
     invoke(callbackId, {
-      errMsg: 'canvasPutImageData:fail'
+      errMsg: 'canvasToTempFilePath:fail'
     })
     return
   }
@@ -840,20 +842,24 @@ export function canvasToTempFilePath ({
     canvas.width = data.width
     canvas.height = data.height
     var c2d = canvas.getContext('2d')
-    c2d.putImageData(imgData, 0, 0)
-    var base64 = canvas.toDataURL('image/png')
-    var img = new Image()
-    img.onload = function () {
-      canvas.width = destWidth || imgData.width
-      canvas.height = destHeight || imgData.height
-      c2d.drawImage(img, 0, 0)
-      base64 = canvas.toDataURL(`image/${fileType.toLowerCase()}`, qualit)
-      invoke(callbackId, {
-        errMsg: 'canvasToTempFilePath:ok',
-        tempFilePath: base64
-      })
-    }
-    img.src = base64
+    c2d.putImageData(imgData, 0, 0, 0, 0, destWidth || imgData.width, destHeight || imgData.height)
+    var base64 = canvas.toDataURL(`image/${fileType.toLowerCase()}`, qualit)
+    invoke(callbackId, {
+      errMsg: 'canvasToTempFilePath:ok',
+      tempFilePath: base64
+    })
+    // var img = new Image()
+    // img.onload = function () {
+    //   canvas.width = destWidth || imgData.width
+    //   canvas.height = destHeight || imgData.height
+    //   c2d.drawImage(img, 0, 0)
+    //   base64 = canvas.toDataURL(`image/${fileType.toLowerCase()}`, qualit)
+    //   invoke(callbackId, {
+    //     errMsg: 'canvasToTempFilePath:ok',
+    //     tempFilePath: base64
+    //   })
+    // }
+    // img.src = base64
   })
   operateCanvas(canvasId, pageId, 'getImageData', {
     x,

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

 <template>
-  <uni-canvas
-    :canvas-id="canvasId"
-    :disable-scroll="disableScroll"
+  <uni-canvas
+    :canvas-id="canvasId"
+    :disable-scroll="disableScroll"
     v-on="_listeners">
-    <canvas
-      ref="canvas"
-      width="300"
+    <canvas
+      ref="canvas"
+      width="300"
       height="150" />
     <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;">
       <slot />
@@ -19,7 +19,7 @@ import {
 
 import {
   wrapper
-} from './hidpi'
+} from 'uni-helpers/hidpi'
 
 function resolveColor (color) {
   color = color.slice(0)
@@ -459,4 +459,4 @@ export default {
         width: 100%;
         height: 100%;
     }
-</style>
+</style>