收藏
回答

利用画布在video截图,在安卓端截图第一张永远是空白内容

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 微信安卓客户端 3.9.12.51 3.7.11

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

  toggleScreenShotMode() {
    console.log("点击截屏")
    const videoContext = wx.createVideoContext('ulVideo'this);
    const query = wx.createSelectorQuery();
    query.select('#videoCanvas')
      .fields({
        nodetrue,
        sizetrue
      })
      .exec((res) => {
        console.log(res);
        const canvas = res[0].node;
        const canvasContext = canvas.getContext('2d');
        const width = res[0].width;
        const height = res[0].height;
        canvas.width = width;
        canvas.height = height;
        videoContext.pause();
  
        console.log('currentTime ='this.data.currentTime);
        videoContext.seek(this.data.currentTime);
        setTimeout(() => {
          wx.createSelectorQuery().select('#ulVideo').context().exec((res) => {
            console.log(res);
            const video = res[0].context;
            canvasContext.clearRect(00, width, height);
            canvasContext.drawImage(video, 00, width, height);
  
            wx.canvasToTempFilePath({
              canvas: canvas,
              fileType'jpg',
              success(res) => {
                console.log('截屏成功', res.tempFilePath);
                // 获取图像数据
                wx.getFileSystemManager().readFile({
                  filePath: res.tempFilePath,
                  encoding'base64',
                  success(fileRes) => {
                    const base64Image = 'data:image/png;base64,' + fileRes.data;
                    this.addImageToReport(res.tempFilePath, base64Image);
                  },
                  fail(err) => {
                    console.error('读取图像数据失败:', err);
                  },
                });
              },
              fail(err) => {
                console.error('截屏失败', err);
              }
            });
          });
        }, 500);
      });
  },
最后一次编辑于  03-20
回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--Demons
    社区技术运营专员--Demons
    03-19

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    03-19
    有用
    回复
登录 后发表内容