微信小程序原生 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 小时前
【含文档+PPT+源码】基于微信小程序农家乐美食餐厅预约推广系统
微信小程序·小程序·美食
计算机-秋大田10 小时前
基于微信小程序的电子竞技信息交流平台设计与实现(LW+源码+讲解)
spring boot·后端·微信小程序·小程序·课程设计
struggle202514 小时前
2025开源DouyinLiveRecorder全平台直播间录制工具整合包,多直播同时录制、教学直播录制、教学视频推送、简单易用不占内存
图像处理·计算机视觉·开源·音视频·语音识别
计算机徐师兄15 小时前
Java基于SSM框架的互助学习平台小程序【附源码、文档】
小程序·互助学习·互助学习平台小程序·java互助学习微信小程序·互助学习微信小程序·互助学习平台微信小程序
西农小陈16 小时前
Python-基于PyQt5,wordcloud,pillow,numpy,os,sys的智能词云生成器
开发语言·python·小程序·pycharm·numpy·pyqt·pillow
Stanford_110618 小时前
C++中常用的十大排序方法之4——希尔排序
c++·算法·微信小程序·排序算法·微信公众平台·twitter·微信开放平台
说私域18 小时前
开源AI智能名片2+1链动模式S2B2C商城小程序:重塑私域流量运营格局
人工智能·小程序·流量运营
Colinnian21 小时前
微信小程序中在一个大边框里给每个小边框均匀分配空间
微信小程序·小程序·notepad++
一 乐1 天前
基于微信小程序的酒店管理系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·酒店管理系统
硬件学长森哥1 天前
音视频多媒体编解码器基础-codec
驱动开发·嵌入式硬件·音视频