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

news2024/11/14 3:50:59

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:

 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()

  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2238562.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

el-table 纵向垂直表头处理

项目中表格展示会遇到需要纵向垂直表头情况&#xff0c;下面&#xff0c;我们基于el-table组件来实现这种表格。 以下是这次需要用到的数据表格&#xff0c;已知左侧违章名称是固定的&#xff0c;而月份是不固定的&#xff0c;在后端返回数据格式已确定的情况下&#xff0c;需…

Android OpenGL ES详解——纹理:纹理过滤GL_NEAREST和GL_LINEAR的区别

目录 一、概念 1、纹理过滤 2、邻近过滤 3、线性过滤 二、邻近过滤和线性过滤的区别 三、源码下载 一、概念 1、纹理过滤 当纹理被应用到三维物体上时&#xff0c;随着物体表面的形状和相机视角的变化&#xff0c;会导致纹理在渲染过程中出现一些问题&#xff0c;如锯齿…

超市11-12月生鲜重点商品配置

11月份&#xff1a;应季商品很多,特别是与季节相对应的蔬菜大量上市。宜推荐对预防感冒等相应的特殊食谱,推荐对于常外出的人方便又省事、省时的食谱&#xff0c;推荐多种花样的火锅&#xff0c;推荐便于保存的应季食品原料。 生活特性&#xff1a;大众食谱宜以炖菜、红焖、火锅…

c++设计模式demo

模式设计原则 依赖倒置原则 ⾼层模块不应该依赖低层模块&#xff0c;⼆者都应该依赖抽象 &#xff1b; 抽象不应该依赖具体实现&#xff0c;具体实现应该依赖于抽象&#xff1b; ⾃动驾驶系统公司是⾼层&#xff0c;汽⻋⽣产⼚商为低层&#xff0c;它们不应该互相依赖&#x…

【网络面试篇】其他面试题——Cookie、Session、DNS、CDN、SSL/TLS、加密概念

目录 一、HTTP 相关问题 1. Cookie 和 Session 是什么&#xff1f; &#xff08;1&#xff09;Cookie &#xff08;2&#xff09;Session 2. Cookie 的工作原理&#xff1f; 3. Session 的工作原理&#xff1f; 4. Cookie 和 Session 有什么区别&#xff1f; 二、其他问…

软件测试第二篇软件测试技术

第五章单元测试和集成测试的技术 单元静态测试主要由开发人员完成。 标准&#xff1a;规定什么能做&#xff0c;什么不能做。 规范&#xff1a;建议你要怎么做。 5.1.2 代码评审 代码评审是一种发现代码缺陷的另一种测试方法。 代码审查的最佳实践&#xff1a; 创建代码审…

QT中 update()函数无法实时调用 paintEvent

QT中 update()函数无法实时调用 paintEvent&#xff01; 在QT中&#xff0c;update()函数用于标记一个窗口区域为“需要重绘”。当调用update()后&#xff0c;QT会在合适的时候调用paintEvent()来重绘这个区域。然而&#xff0c;update()不会立即调用paintEvent()&#xff0c;…

SDL事件相关

文章目录 事件相关的函数和数据结构用户自定义事件代码相关&#xff1a; 事件相关的函数和数据结构 SDL_WaitEvent :等待一个事件SDL_PushEvent 发送一个事件SDL_PumpEvents(): 将硬件设备产生的时间放入事件队列 &#xff0c;用于读取事件&#xff0c;在调用该函数之前&#…

优化时钟网络之时钟抖动

Note&#xff1a;文章内容以Xilinx 7系列FPGA进行讲解 1、什么是时钟抖动 时钟抖动就是时钟周期之间出现的偏差。比如一个时钟周期为10ns的时钟&#xff0c;理想情况下&#xff0c;其上升沿会出现在0ns&#xff0c;10ns&#xff0c;20ns时刻&#xff0c;假设某个上升沿出现的时…

达梦8-达梦数据实时同步软件(DMHS)配置-Oracle-DM8

1、安装环境 源端目的端IP地址192.168.6.111192.168.6.110系统版本Red Hat 6.4Kylin v10数据库版本Oracle11g达梦 v8系统用户Oracledmdba字符集MERICAN_AMERICA.AL32UTF8UTF-8端口15215236实例名PRODDMSERVER数据库软件目录/u01/app/oracle/opt/dmdbmsDMHS安装目录/u01/dmhs/o…

AI基础知识

目录 1.激活函数:one: 激活函数的作用:two: sigmoid函数:three: tanh函数:four: ReLu:five: Leaky ReLU 2.Softmax函数3.优化器:one: 优化器的作用:two: BGD&#xff08;批梯度下降&#xff09;:three: SGD&#xff08;随机梯度下降&#xff09;:four: MBGD&#xff08;Mini Ba…

【论文阅读】Learning dynamic alignment via meta-filter for few-shot learning

通过元滤波器学习动态对齐以实现小样本学习 引用&#xff1a;Xu C, Fu Y, Liu C, et al. Learning dynamic alignment via meta-filter for few-shot learning[C]//Proceedings of the IEEE/CVF conference on computer vision and pattern recognition. 2021: 5182-5191. 论文…

ArcGIS Pro SDK Addin-DAML

ArcGIS Pro SDK Addin-DAML 文章目录 ArcGIS Pro SDK Addin-DAML1 Panes: 重置窗格2 Button: 从功能区中移除核心按钮3 Button: 将新按钮插入功能区上的现有组4 Menu: 在图层上下文菜单中插入一个新按钮5 Menu: 在 Map Container 上下文菜单中插入新菜单6 Menu: 在2D Map上下文…

FPGA学习笔记#7 Vitis HLS 数组优化和函数优化

本笔记使用的Vitis HLS版本为2022.2&#xff0c;在windows11下运行&#xff0c;仿真part为xcku15p_CIV-ffva1156-2LV-e&#xff0c;主要根据教程&#xff1a;跟Xilinx SAE 学HLS系列视频讲座-高亚军进行学习 学习笔记&#xff1a;《FPGA学习笔记》索引 FPGA学习笔记#1 HLS简介及…

熊猫追剧 1.0.2 | 免费影视播放,独家蓝光线路

熊猫追剧是一款免费的视频播放软件&#xff0c;集合了网络上的电影、电视剧、综艺、动漫以及短剧等多种类型的视频资源。经过测试&#xff0c;该软件内没有广告干扰&#xff0c;采用独家蓝光线路&#xff0c;提供高清流畅的观影体验。用户还可以享受视频投屏、下载和倍速播放等…

[CKS] K8S AppArmor Set Up

最近准备花一周的时间准备CKS考试&#xff0c;在准备考试中发现有一个题目关于AppArmor Pod操作权限的问题。 ​ 专栏其他文章: [CKS] Create/Read/Mount a Secret in K8S-CSDN博客[CKS] Audit Log Policy-CSDN博客 -[CKS] 利用falco进行容器日志捕捉和安全监控-CSDN博客[CKS] …

Tomcat漏洞利用工具-TomcatScanPro(二)

项目地址 https://github.com/lizhianyuguangming/TomcatScanPro 简介 本项目是一个针对 Tomcat 服务的弱口令检测、漏洞检测以及本地文件包含&#xff08;LFI&#xff09;攻击工具。除了支持 CVE-2017-12615 漏洞的多种利用方式外&#xff0c;新版本还集成了 CNVD-2020-104…

【XML协议】轻松掌握使用C++ XML解析库——pugixml

文章介绍了xml协议的组成以及C xml解析库pugixml的常用操作。源于开发中每次遇到xml操作时&#xff0c;都要回过头查看pugixml库常用操作时什么样的&#xff0c;能不能有个更深刻和清晰的认识呢&#xff1f;其实搞清楚xml结构和pugixml组织结构的对照关系&#xff0c;以及pugix…

《无线重构世界》射频模组演进

射频前端四大金刚 射频前端由PA、LNA、滤波器、开关“四大金刚” 不同的模块有自己的工艺和性能特点 分层设计 射频前端虽然只由PA、LNA、开关、混频器4个模块构成&#xff0c;但不同模块之间相互连接且相互影响。如果将射频系统当成一个整体来理解&#xff0c;其中的细节和…

《Python编程实训快速上手》第五天--模式匹配与正则表达式

一、不用正则表达式查找文本模式 文本模式是一种人为规定的结构&#xff0c;现在有一个模式&#xff1a;3个数字-3个数字-4个数字 使用isPhoneNumber()函数来判断字符串是否匹配该模式 def isPhoneNumber(number):if len(number) ! 12:return Falsefor i in range(0,3):if n…