uni.canvasToTempFilePath的坑

分类：uni-app

canvas

昨天做一个将canvas转图片的功能，发现以下问题：
1、在APP端，uni.canvasToTempFilePath方法需要放在convasContext.draw的回调里面，否则会一直报canvas is empty
2、在H5端，需要convasContext.draw与uni.canvasToTempFilePath同步执行，也就是不能放在回调里
3、在APP端uni.canvasToTempFilePath返回的路径是一个临时的图片路径
4、在H5端，生成的是base64路径

4 赞关注分享

39 个评论

要回复文章请先登录或注册

6***@qq.com

回复 7***@qq.com ：

2024年9月8号该问题依然存在

2024-09-06 11:24

乔小猿

遇到了一个canvasToTempFilePath:fail Cannot read property 'width' of undefined。不知道有人知道怎么解决嘛

2024-08-24 15:35

4***@qq.com

canvasToTempFilePath h5端返回的base64格式图片显示不全有时候能显示全有时候显示不全

2024-08-19 16:44

1***@qq.com

回复 1***@qq.com ：

canvasToTempFilePath死活不执行

2024-07-11 13:49

1***@qq.com

// 保存绘图并导出图片
ctx.draw(true, (() => {
let drawTimer = setTimeout(() => {
clearTimeout(drawTimer)
drawTimer = null
console.log(this.canvasId)
// #ifndef MP-ALIPAY
uni.canvasToTempFilePath({
canvasId: this.canvasId,
destWidth: this.higtCanvasSize,
destHeight: this.higtCanvasSize,
success: (res) => {
// 在 H5 平台下，tempFilePath 为 base64
console.log(res.tempFilePath)
this.handlePrizeImg({
ok: true,
data: res.tempFilePath,
msg: '画布导出生成图片成功'
})
},
fail: (err) => {
this.handlePrizeImg({
ok: false,
data: err,
msg: '画布导出生成图片失败'
})
}
}, this)
// #endif
}, 500)
})())

2024-07-11 13:49