?在ctx.draw()回調(diào)生成圖片,參考canvasToTempFilePath接口文檔
// data
imgFilePath: null,// 緩存二維碼圖片canvas路徑
//js
// 首先在draw()里進(jìn)行本地存儲(chǔ)
......
ctx.draw(false, () = >{
uni.canvasToTempFilePath({ // 把畫(huà)布轉(zhuǎn)化成臨時(shí)文件
quality: 1,
// 圖片質(zhì)量
canvasId: 'shareCanvas',
// 畫(huà)布ID
success: (res) = >{
// uni.showToast({
// icon: 'success',
// mask: true,
// title: '繪制完成',
// });
this.imgFilePath = res.tempFilePath;
//console.log(this.imgFilePath, 'this.imgFilePath');
uni.setStorageSync('filePath', this.imgFilePath) //保存臨時(shí)文件路徑到緩存
},
fail: function(res) {
// console.log(res);
}
})
})
// 然后保存圖片按鈕進(jìn)行取值
// 保存圖片到本地,下面保存到手機(jī)
async savePic() {
// console.log(this.imgFilePath, 'this.imgFilePathsavePic')
let res = await uni.canvasToTempFilePath({ // 把畫(huà)布轉(zhuǎn)化成臨時(shí)文件
quality: 1,
// 圖片質(zhì)量
canvasId: 'shareCanvas',
}) // 畫(huà)布ID
let storageImgFilePath = uni.getStorageSync('filePath')
// console.log(storageImgFilePath,'storageImgFilePath');
setTimeout(() = >{
uni.saveImageToPhotosAlbum({ // 存成圖片至手機(jī)
filePath: storageImgFilePath,
success: (res2) = >{
uni.showToast({
title: '圖片保存成功',
duration: 2000
})
},
............
})
},
1000)
上一篇文章,文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-815273.html
vue3+elementPlus:el-drawer新增修改彈窗復(fù)用_element plus drawer onclick outside 嵌套彈窗-CSDN博客文章瀏覽閱讀854次,點(diǎn)贊5次,收藏6次。vue3+elementPlus:el-drawer新增修改彈窗復(fù)用。在el-drawer的屬性里設(shè)置:title屬性,和重置函數(shù)。_element plus drawer onclick outside 嵌套彈窗https://blog.csdn.net/weixin_43928112/article/details/135237566文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-815273.html
到了這里,關(guān)于uniapp踩坑之項(xiàng)目:canvas第一次保存是空白圖片的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!