uniapp uni-popup弹出框中的canvas不显示失效
解决uniapp中 canvas嵌套在uni-popup中时,cavas不显示或显示空白的问题。
·
解决uniapp中 canvas嵌套在uni-popup中时,cavas不显示或显示空白的问题。
这个问题主要是发生在APP端,小程序端没有出现过。
原因
当canvas重新渲染时,canvas中的内容全部都会被清空。
解决
popup弹出后,不要马上绘制,需要等待popup中的canvas渲染完成后,在调用canvas取绘制就好了!!
<uni-popup ref="posterPopup" type="bottom">
<view class="poster">
<canvas id="posterCanvas" canvas-id="posterCanvas" style="width:700rpx;height: 1104rpx;margin: 20rpx auto;"></canvas>
</view>
</uni-popup>
const createCanvas = async () => {
//创建canvas对象
const canvas = uni.createCanvasContext('posterCanvas', instance);
canvas.drawImage(posterBg, 0, 0, uni.upx2px(720), uni.upx2px(1104));
canvas.drawImage(demo2Png, uni.upx2px(470), uni.upx2px(800), uni.upx2px(200), uni.upx2px(200));
canvas.draw(true, res => {
setTimeout(() => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
canvasId: 'posterCanvas',
fileType: 'png',
quality: 1,
success: success => {
uni.saveImageToPhotosAlbum({
filePath: success.tempFilePath,
success: ({file, path, errMsg}) => {
// uni.hideLoading();
// console.log(file, path, errMsg)
uni.showToast({
title: '保存成功',
icon: 'none'
})
},
fail: () => {
uni.hideLoading();
},
complete: () => {
}
});
}
})
}, 500)
});
}
const showPoster = () => {
posterPopup.value.open('bottom')
// 错误:不显示
// createCanvas()
// 正确
nextTick(createCanvas)
}
更多推荐
已为社区贡献4条内容
所有评论(0)