uniapp uni-popup弹出框中的canvas不显示失效

解决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)
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值