微信小程序原生 canvas画布截取视频帧保存为图片并进行裁剪

html页面:

视频尺寸过大会画布会撑开屏幕,要下滑

尺寸和视频链接是从上个页面点击传过来的,可自行定义

html 复制代码
<canvas id="cvs1" type="2d" style="width: {{videoWidth}}px;height: {{videoHeight}}px;"></canvas>
<video id="video" src="{{tempFilePath}}" bindtimeupdate="timeUpdate"></video>
<t-button class="block" bind:tap="getCanvas" theme="primary">立即截图</t-button>
<image src="{{cropurl}}" style="width: 100%;" mode="widthFix" />

js:

TypeScript 复制代码
 timeUpdate: function (e) {
    //实时播放进度 秒数
    var currentTime = parseInt(e.detail.currentTime)
    this.setData({
      'currentTime': currentTime,
    });
    // console.log("视频播放到第" + currentTime + "秒") //查看正在播放时间,以秒为单位
  },

 //绘制截图
  getCanvas() {
    const dpr = wx.getSystemInfoSync().pixelRatio
    wx.createSelectorQuery().select('#video').context(res => {
      console.log('select video', res)
      const video = this.video = res.context
      video.pause() // 暂停视频,防止继续播放
      video.seek(this.data.currentTime) // 将视频定位到当前时间
      // console.log("视频宽度高度", this.data.videoWidth, this.data.videoHeight)
      wx.createSelectorQuery().selectAll('#cvs1').fields({
          node: true,
          size: true
        })
        .exec((res) => {
          console.log('select canvas', res)
          const canvas = res[0][0].node
          const ctx1 = res[0][0].node.getContext('2d')
          res[0][0].node.width = this.data.videoWidth
          res[0][0].node.height = this.data.videoHeight
          //图片加载完成后绘制到画布上
          ctx1.drawImage(video, 0, 0, this.data.videoWidth, this.data.videoHeight);
          console.log("ctx1=>", ctx1)
          wx.canvasToTempFilePath({
            width: this.data.videoWidth,
            height: this.data.videoHeight,
            canvas: canvas,
            success: (res) => {
              console.log("图片路径", res.tempFilePath)
//一定要有这一步不然拿到的是空白图片
              this.setData({
                canvasurl: res.tempFilePath
              })
              //裁剪图片
              wx.cropImage({
                src: this.data.canvasurl, // 图片路径
                cropScale: '4:3', // 裁剪比例
                success: (res) => {
                  console.log('裁剪后图片', res)
                  this.setData({
                    cropurl: res.tempFilePath
                  })
                }
              })
            },
            fail: (err) => {
              console.log(err)
            }
          })
        })
      //   //base64
      //   // setTimeout(() => {
      //   //   this.setData({
      //   //     // 导出canvas的url(base64格式)
      //   //     canvasurl: canvas.toDataURL('image/png'),
      //   //     show: true
      //   //   })
    }).exec()

  },
相关推荐
说私域1 天前
开源AI智能名片赋能下微商商业模式的创新路径研究——以链动2+1模式与S2B2C商城小程序融合为例
人工智能·小程序·开源
_AaronWong1 天前
微信小程序同声传译插件接入实战:语音识别功能完整实现指南
前端·微信小程序·uni-app
赵庆明老师1 天前
Uniapp微信小程序开发:http请求封装。
http·微信小程序·uni-app
皇族崛起1 天前
【音频标注】- 音频标注项目调研
音视频·解决方案·音频标注·样本标注·项目规划
pearbing2 天前
B站排名优化:知识、娱乐、生活类内容的差异化实操策略
人工智能·微信·小程序·生活·娱乐
流***陌2 天前
旧物新生:一款回收小程序如何让环保成为举手之劳
小程序
尘似鹤2 天前
微信小程序学习(五)
学习·微信小程序·小程序
计算机毕业设计小帅2 天前
【2026计算机毕业设计】基于微信小程序的英语在线学习系统
学习·微信小程序·毕业设计·课程设计
hazy1k2 天前
K230基础-录放视频
网络·人工智能·stm32·单片机·嵌入式硬件·音视频·k230
wearegogog1232 天前
基于块匹配的MATLAB视频去抖动算法
算法·matlab·音视频