提交 a5cbcd41 编写于 作者: Q qiang

fix: 解决 H5 端 uni.canvasToTempFilePath 接口 desWidth、desHeight 参数不生效的问题

上级 95656320
...@@ -64,8 +64,8 @@ export const canvasPutImageData = { ...@@ -64,8 +64,8 @@ export const canvasPutImageData = {
} }
const fileType = { const fileType = {
PNG: 'PNG', PNG: 'png',
JPG: 'JPG' JPG: 'jpeg'
} }
export const canvasToTempFilePath = { export const canvasToTempFilePath = {
...@@ -103,7 +103,7 @@ export const canvasToTempFilePath = { ...@@ -103,7 +103,7 @@ export const canvasToTempFilePath = {
type: String, type: String,
validator (value, params) { validator (value, params) {
value = (value || '').toUpperCase() value = (value || '').toUpperCase()
params.fileType = Object.values(fileType).indexOf(value) < 0 ? fileType.PNG : value params.fileType = value in fileType ? fileType[value] : fileType.PNG
} }
}, },
quality: { quality: {
......
import createCallbacks from 'uni-helpers/callbacks' import createCallbacks from 'uni-helpers/callbacks'
import { wrapper, pixelRatio } from 'uni-helpers/hidpi' import { pixelRatio } from 'uni-helpers/hidpi'
const canvasEventCallbacks = createCallbacks('canvasEvent') const canvasEventCallbacks = createCallbacks('canvasEvent')
...@@ -255,17 +255,10 @@ var methods3 = ['setFillStyle', 'setTextAlign', 'setStrokeStyle', 'setGlobalAlph ...@@ -255,17 +255,10 @@ var methods3 = ['setFillStyle', 'setTextAlign', 'setStrokeStyle', 'setGlobalAlph
] ]
var tempCanvas var tempCanvas
function getTempCanvas (width, height) { function getTempCanvas () {
if (!tempCanvas) { if (!tempCanvas) {
tempCanvas = document.createElement('canvas') 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 return tempCanvas
} }
...@@ -857,56 +850,28 @@ export function canvasToTempFilePath ({ ...@@ -857,56 +850,28 @@ export function canvasToTempFilePath ({
}) })
return return
} }
var cWidth = (typeof destWidth !== 'undefined') ? (destWidth * pixelRatio) : data.width var canvas = getTempCanvas()
var cHeight = (typeof destHeight !== 'undefined') ? (destHeight * pixelRatio) : data.height canvas.width = data.width
var canvas = getTempCanvas(cWidth, cHeight) canvas.height = data.height
var c2d = canvas.getContext('2d') var c2d = canvas.getContext('2d')
c2d.putImageData(imgData, 0, 0, 0, 0, imgData.width, imgData.height) c2d.putImageData(imgData, 0, 0)
var imageType = (fileType ? fileType.toLowerCase() : 'png') var base64 = canvas.toDataURL('image/png')
if (imageType === 'jpg') { var img = new Image()
imageType = 'jpeg' img.onload = function () {
} var width = canvas.width = typeof destWidth === 'number' ? destWidth : imgData.width * pixelRatio
var height = canvas.height = typeof destHeight === 'number' ? destHeight : imgData.height * pixelRatio
var dCanvas if (fileType === 'jpeg') {
var isDest = (typeof destWidth !== 'undefined' && typeof destHeight !== 'undefined') c2d.fillStyle = '#fff'
if (isDest) { c2d.fillRect(0, 0, width, height)
dCanvas = document.createElement('canvas') }
dCanvas.width = destWidth c2d.drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height)
dCanvas.height = destHeight base64 = canvas.toDataURL(`image/${fileType}`, qualit)
} else { invoke(callbackId, {
dCanvas = canvas.cloneNode(true) errMsg: 'canvasToTempFilePath:ok',
} tempFilePath: base64
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 {
dCtx.drawImage(canvas, 0, 0)
} }
var base64 = dCanvas.toDataURL(`image/${imageType}`, qualit) img.src = base64
invoke(callbackId, {
errMsg: 'canvasToTempFilePath:ok',
tempFilePath: base64
})
// TODO base64返回的是高清图,如果将img通过drawImage画到等宽高的canvas会出现显示不全问题, drawImage在次做了高清处理
// 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/jpeg`, qualit)
// invoke(callbackId, {
// errMsg: 'canvasToTempFilePath:ok',
// tempFilePath: base64
// })
// }
// img.src = base64
}) })
operateCanvas(canvasId, pageId, 'getImageData', { operateCanvas(canvasId, pageId, 'getImageData', {
x, x,
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册