解决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)
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐