Skip to content

Commit

Permalink
update: H5 高清canvas canvasToTempFilePath模糊问题.
Browse files Browse the repository at this point in the history
  • Loading branch information
@dcloudhdx
dcloudhdx committed Apr 22, 2019
1 parent d04fabd commit 404139f
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 187 deletions.
328 changes: 164 additions & 164 deletions src/core/view/components/canvas/hidpi.js → src/core/helpers/hidpi.js
View file
Original file line number Diff line number Diff line change
@@ -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)
}
36 changes: 21 additions & 15 deletions src/core/service/api/context/canvas.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import createCallbacks from 'uni-helpers/callbacks'
import { wrapper } from 'uni-helpers/hidpi'

const canvasEventCallbacks = createCallbacks('canvasEvent')

Expand Down Expand Up @@ -257,6 +258,7 @@ var tempCanvas
function getTempCanvas () {
if (!tempCanvas) {
tempCanvas = document.createElement('canvas')
wrapper(tempCanvas)
}
return tempCanvas
}
Expand Down Expand Up @@ -816,7 +818,7 @@ export function canvasToTempFilePath ({
pageId = app.$route.params.__id__
} else {
invoke(callbackId, {
errMsg: 'canvasPutImageData:fail'
errMsg: 'canvasToTempFilePath:fail'
})
return
}
Expand All @@ -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,
Expand Down
Loading

0 comments on commit 404139f

Please sign in to comment.