uniapp踩坑之项目：canvas第一次保存是空白图片-编程知识

uniapp踩坑之项目：canvas第一次保存是空白图片

在ctx.draw()回调生成图片，参考canvasToTempFilePath接口文档

// data
imgFilePath: null,// 缓存二维码图片canvas路径//js
// 首先在draw（）里进行本地存储
......
ctx.draw(false, () = >{uni.canvasToTempFilePath({ // 把画布转化成临时文件quality: 1,// 图片质量canvasId: 'shareCanvas',// 画布IDsuccess: (res) = >{// uni.showToast({//  icon: 'success',//  mask: true,//  title: '绘制完成',// });this.imgFilePath = res.tempFilePath;//console.log(this.imgFilePath, 'this.imgFilePath');uni.setStorageSync('filePath', this.imgFilePath) //保存临时文件路径到缓存},fail: function(res) {// console.log(res);}})
})// 然后保存图片按钮进行取值
// 保存图片到本地，下面保存到手机
async savePic() {// console.log(this.imgFilePath, 'this.imgFilePathsavePic')let res = await uni.canvasToTempFilePath({ // 把画布转化成临时文件quality: 1,// 图片质量canvasId: 'shareCanvas',}) // 画布IDlet storageImgFilePath = uni.getStorageSync('filePath')// console.log(storageImgFilePath,'storageImgFilePath');setTimeout(() = >{uni.saveImageToPhotosAlbum({ // 存成图片至手机filePath: storageImgFilePath,success: (res2) = >{uni.showToast({title: '图片保存成功',duration: 2000})},............})},1000)

上一篇文章，

vue3+elementPlus：el-drawer新增修改弹窗复用_element plus drawer onclick outside 嵌套弹窗-CSDN博客文章浏览阅读854次，点赞5次，收藏6次。vue3+elementPlus：el-drawer新增修改弹窗复用。在el-drawer的属性里设置:title属性，和重置函数。_element plus drawer onclick outside 嵌套弹窗https://blog.csdn.net/weixin_43928112/article/details/135237566