微信小程序原生 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()

  },
相关推荐
流口水的兔子3 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记3 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~183399481214 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero6 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠7 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
karmueo4611 小时前
视频序列和射频信号多模态融合算法Fusion-Vital解读
算法·音视频·多模态
昨日之日200611 小时前
Video Background Remover V3版 - AI视频一键抠像/视频换背景 支持50系显卡 一键整合包下载
人工智能·音视频
汤姆yu18 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
站在巨人肩膀上的码农1 天前
全志T507 音频ALSA核心层注册流程分析
驱动开发·音视频·安卓·全志·alsa·声卡
说私域1 天前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源