From 404139f50d46b4b2460df4fa2f40f708a577ee6b Mon Sep 17 00:00:00 2001 From: handongxun Date: Mon, 22 Apr 2019 15:28:56 +0800 Subject: [PATCH] =?UTF-8?q?update:=20H5=20=E9=AB=98=E6=B8=85canvas=20canva?= =?UTF-8?q?sToTempFilePath=E6=A8=A1=E7=B3=8A=E9=97=AE=E9=A2=98.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/canvas => helpers}/hidpi.js | 328 +++++++++--------- src/core/service/api/context/canvas.js | 36 +- src/core/view/components/canvas/index.vue | 16 +- 3 files changed, 193 insertions(+), 187 deletions(-) rename src/core/{view/components/canvas => helpers}/hidpi.js (96%) diff --git a/src/core/view/components/canvas/hidpi.js b/src/core/helpers/hidpi.js similarity index 96% rename from src/core/view/components/canvas/hidpi.js rename to src/core/helpers/hidpi.js index 14fb45b27..e3bb8e856 100644 --- a/src/core/view/components/canvas/hidpi.js +++ b/src/core/helpers/hidpi.js @@ -1,168 +1,168 @@ -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) } diff --git a/src/core/service/api/context/canvas.js b/src/core/service/api/context/canvas.js index c3ea0826a..3aeb1da19 100644 --- a/src/core/service/api/context/canvas.js +++ b/src/core/service/api/context/canvas.js @@ -1,4 +1,5 @@ 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, diff --git a/src/core/view/components/canvas/index.vue b/src/core/view/components/canvas/index.vue index c8ccf5ff7..11abd6f33 100644 --- a/src/core/view/components/canvas/index.vue +++ b/src/core/view/components/canvas/index.vue @@ -1,11 +1,11 @@