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

  },
相关推荐
2501_916013748 小时前
iOS 推送开发完整指南,APNs 配置、证书申请、远程推送实现与上架调试经验分享
android·ios·小程序·https·uni-app·iphone·webview
Enabler_Rx10 小时前
AI辅助制作宣传视频
音视频
PhoenixAI810 小时前
保姆级教程-剪映多视频融合及识别文字转换方法
音视频
Stanford_110612 小时前
如何利用Python进行数据分析与可视化的具体操作指南
开发语言·c++·python·微信小程序·微信公众平台·twitter·微信开放平台
2501_9159090612 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
知识分享小能手15 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
2501_9151063217 小时前
JavaScript编程工具有哪些?老前端的实用工具清单与经验分享
开发语言·前端·javascript·ios·小程序·uni-app·iphone
liaomin41610056918 小时前
transformers音频实战02-基于 Speech Commands 数据集的语音识别实战项目全流程
人工智能·音视频·语音识别
Terio_my18 小时前
微信小程序开发从零基础到项目发布的全流程实战教程(四)
微信小程序·小程序
2501_9160137419 小时前
iOS 上架 App 全流程实战,应用打包、ipa 上传、App Store 审核与工具组合最佳实践
android·ios·小程序·https·uni-app·iphone·webview