From c9a2c894e9b4afa9ea4c285858866df0d0fddaac Mon Sep 17 00:00:00 2001
From: handongxun <handongxun@dcloud.io>
Date: Sun, 28 Apr 2019 14:48:52 +0800
Subject: [PATCH] =?UTF-8?q?update:=20canvas=E6=9B=B4=E6=96=B0=E5=AE=BD?=
 =?UTF-8?q?=E9=AB=98=E5=90=8E=E6=97=A0=E6=95=88=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?canvasToTempFilePath=E5=AE=BD=E9=AB=98=E5=8F=8A=E7=9B=AE?=
 =?UTF-8?q?=E6=A0=87=E5=AE=BD=E9=AB=98=E8=AE=A1=E7=AE=97=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/helpers/hidpi.js                 |  5 +-
 src/core/service/api/context/canvas.js    | 62 ++++++++++++++++-------
 src/core/view/components/canvas/index.vue | 11 ++--
 3 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/src/core/helpers/hidpi.js b/src/core/helpers/hidpi.js
index b235568d6..1892f2f75 100644
--- a/src/core/helpers/hidpi.js
+++ b/src/core/helpers/hidpi.js
@@ -1,4 +1,4 @@
-const pixelRatio = (function () {
+export const pixelRatio = (function () {
   const canvas = document.createElement('canvas')
   const context = canvas.getContext('2d')
   const backingStore = context.backingStorePixelRatio ||
@@ -163,7 +163,4 @@ export function wrapper (canvas) {
   canvas.width *= pixelRatio
   canvas.height *= pixelRatio
   canvas.getContext('2d').__hidpi__ = true
-
-  console.log(canvas.width)
-  console.log(canvas.height)
 }
diff --git a/src/core/service/api/context/canvas.js b/src/core/service/api/context/canvas.js
index cd60bfe4e..9fdb55f2c 100644
--- a/src/core/service/api/context/canvas.js
+++ b/src/core/service/api/context/canvas.js
@@ -1,5 +1,5 @@
 import createCallbacks from 'uni-helpers/callbacks'
-import { wrapper } from 'uni-helpers/hidpi'
+import { wrapper, pixelRatio } from 'uni-helpers/hidpi'
 
 const canvasEventCallbacks = createCallbacks('canvasEvent')
 
@@ -255,10 +255,16 @@ var methods3 = ['setFillStyle', 'setTextAlign', 'setStrokeStyle', 'setGlobalAlph
 ]
 
 var tempCanvas
-function getTempCanvas () {
+function getTempCanvas (width, height) {
   if (!tempCanvas) {
     tempCanvas = document.createElement('canvas')
-    wrapper(tempCanvas)
+  }
+  if (typeof width !== 'undefined' && typeof height !== 'undefined') {
+    if (tempCanvas.width !== width || tempCanvas.height !== height) {
+      tempCanvas.width = width / pixelRatio
+      tempCanvas.height = height / pixelRatio
+      wrapper(tempCanvas)
+    }
   }
   return tempCanvas
 }
@@ -812,6 +818,12 @@ export function canvasToTempFilePath ({
   fileType,
   qualit
 }, callbackId) {
+  if (typeof width !== 'undefined') {
+    width *= pixelRatio
+  }
+  if (typeof height !== 'undefined') {
+    height *= pixelRatio
+  }
   var pageId
   const app = getApp()
   if (app.$route && app.$route.params.__id__) {
@@ -838,23 +850,37 @@ export function canvasToTempFilePath ({
       })
       return
     }
-    var canvas = getTempCanvas()
-    canvas.width = data.width
-    canvas.height = data.height
+    var cWidth = (typeof destWidth !== 'undefined') ? (destWidth * pixelRatio) : data.width
+    var cHeight = (typeof destHeight !== 'undefined') ? (destHeight * pixelRatio) : data.height
+    var canvas = getTempCanvas(cWidth, cHeight)
     var c2d = canvas.getContext('2d')
-    c2d.putImageData(imgData, 0, 0, 0, 0, destWidth || imgData.width, destHeight || imgData.height)
-    var imageType = fileType ? fileType.toLowerCase() : 'png'
-    var base64
-    if (imageType === 'jpg' || imageType === 'jpeg') {
-      var tmpCanvas = canvas.cloneNode(true)
-      var tmpCtx = tmpCanvas.getContext('2d')
-      tmpCtx.fillStyle = '#fff'
-      tmpCtx.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height)
-      tmpCtx.drawImage(canvas, 0, 0)
-      base64 = tmpCanvas.toDataURL(`image/jpeg`, qualit)
+    c2d.putImageData(imgData, 0, 0, 0, 0, imgData.width, imgData.height)
+    var imageType = (fileType ? fileType.toLowerCase() : 'png')
+    if (imageType === 'jpg') {
+      imageType = 'jpeg'
+    }
+
+    var dCanvas
+    var isDest = (typeof destWidth !== 'undefined' && typeof destHeight !== 'undefined')
+    if (isDest) {
+      dCanvas = document.createElement('canvas')
+      dCanvas.width = destWidth
+      dCanvas.height = destHeight
+    } else {
+      dCanvas = canvas.cloneNode(true)
+    }
+    var dCtx = dCanvas.getContext('2d')
+    if (imageType === 'jpeg') {
+      dCtx.fillStyle = '#fff'
+      dCtx.fillRect(0, 0, dCanvas.width, dCanvas.height)
+    }
+
+    if (isDest) {
+      dCtx.drawImageByCanvas(canvas, 0, 0, canvas.width, canvas.height, 0, 0, destWidth, destHeight, true)
     } else {
-      base64 = canvas.toDataURL(`image/${imageType}`, qualit)
+      dCtx.drawImage(canvas, 0, 0)
     }
+    var base64 = dCanvas.toDataURL(`image/${imageType}`, qualit)
 
     invoke(callbackId, {
       errMsg: 'canvasToTempFilePath:ok',
@@ -866,8 +892,6 @@ export function canvasToTempFilePath ({
     // img.onload = function () {
     //   canvas.width = destWidth || imgData.width
     //   canvas.height = destHeight || imgData.height
-    //   c2d.fillStyle = '#fff'
-    //   c2d.fillRect(0, 0, canvas.width, canvas.height)
     //   c2d.drawImage(img, 0, 0)
     //   base64 = canvas.toDataURL(`image/jpeg`, qualit)
     //   invoke(callbackId, {
diff --git a/src/core/view/components/canvas/index.vue b/src/core/view/components/canvas/index.vue
index 94e7f2212..80d1b227f 100644
--- a/src/core/view/components/canvas/index.vue
+++ b/src/core/view/components/canvas/index.vue
@@ -10,6 +10,9 @@
     <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;">
       <slot />
     </div>
+    <v-uni-resize-sensor
+      ref="sensor"
+      @resize="_resize"/>
   </uni-canvas>
 </template>
 <script>
@@ -89,8 +92,8 @@ export default {
   },
   mounted () {
     this._resize({
-      width: this.$attrs.width ? parseInt(this.$attrs.width) : this.$el.offsetWidth,
-      height: this.$attrs.height ? parseInt(this.$attrs.height) : this.$el.offsetHeight
+      width: this.$refs.sensor.$el.offsetWidth,
+      height: this.$refs.sensor.$el.offsetHeight
     })
   },
   methods: {
@@ -108,11 +111,11 @@ export default {
       height
     }) {
       var canvas = this.$refs.canvas
-      if (canvas.width !== width || canvas.height !== height) {
+      if (canvas.style.width !== (width + 'px') || canvas.style.height !== (height + 'px')) {
         canvas.width = width
         canvas.height = height
+        wrapper(canvas)
       }
-      wrapper(canvas)
     },
     _touchmove (event) {
       event.preventDefault()
-- 
GitLab