提交 c9a2c894 编写于 作者: d-u-a's avatar d-u-a

update: canvas更新宽高后无效问题,canvasToTempFilePath宽高及目标宽高计算错误问题

上级 49c44e17
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)
}
import createCallbacks from 'uni-helpers/callbacks'
import { wrapper } from 'uni-helpers/hidpi'
import { wrapper, pixelRatio } from 'uni-helpers/hidpi'
const canvasEventCallbacks = createCallbacks('canvasEvent')
......@@ -255,11 +255,17 @@ var methods3 = ['setFillStyle', 'setTextAlign', 'setStrokeStyle', 'setGlobalAlph
]
var tempCanvas
function getTempCanvas () {
function getTempCanvas (width, height) {
if (!tempCanvas) {
tempCanvas = document.createElement('canvas')
}
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, {
......
......@@ -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)
}
},
_touchmove (event) {
event.preventDefault()
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册