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

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().pixelRatiowx.createSelectorQuery().select('#video').context(res => {console.log('select video', res)const video = this.video = res.contextvideo.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].nodeconst ctx1 = res[0][0].node.getContext('2d')res[0][0].node.width = this.data.videoWidthres[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.mzph.cn/diannao/60298.shtml

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

相关文章

【Linux】软件安装目录的选择

根据 FHS Referenced Specifications /home 是用来放用户文档和个人文件的&#xff0c;不是应用。/opt 是用来放发行版的扩展应用&#xff0c;比如应用商店、计算器之类的&#xff08;有的不会放在这儿&#xff0c;例如 Ubuntu&#xff09;。/usr/lib 则是用于编程和包的库&am…

【vue】echarts地图添加蒙版图片,多图层地图实现天气信息展示

实现原理&#xff1a;多层图层叠加实现复杂的信息展示。 <template><div class"wrapper"><el-drawertitle"天气信息":modal"iszz":visible.sync"weatherinfo":direction"direction"><drawer:labelnam…

100+SCI科研绘图系列教程(R和python)

科研绘图系列&#xff1a;箱线图加百分比点图展示组间差异-CSDN博客科研绘图系列&#xff1a;箱线图加蜜蜂图展示组间数据分布-CSDN博客科研绘图系列&#xff1a;小提琴图和双侧小提琴图展示组间差异-CSDN博客科研绘图系列&#xff1a;组间差异的STAMP图的ggplot2实现-CSDN博客…

QT鼠标事件

QT鼠标事件 1.概述 这篇文章介绍如何使用事件和获取事件的信号 2.创建项目 创建一个widget类型项目&#xff0c;在widget.ui文件中添加一个label控件 然后在项目名称上右键选择Add new... 添加文件&#xff0c;选择 C Class 自定义类名Mylabel&#xff0c;选择基类Base …

“双十一”电商狂欢进行时,在AI的加持下看网易云信IM、RTC如何助力商家!

作为一年一度的消费盛会&#xff0c;2024年“双十一”购物狂欢节早已拉开帷幕。蹲守直播间、在主播热情介绍中点开链接并加购&#xff0c;也已成为大多数人打开“双11”的重要方式。然而&#xff0c;在这火热的购物氛围背后&#xff0c;主播频频“翻车”、优质主播稀缺、客服响…

深入浅出rust内存对齐

在 Rust 中&#xff0c;内存对齐是一个重要的概念&#xff0c;它涉及到数据在内存中的存储方式&#xff0c;以及如何优化内存访问的效率。往往一门语言的内存布局以及对齐方式决定了一门语言的性能&#xff0c;因此学会并深入理解rust中内存布局会让我们写出高性能的rust代码&a…

C++的起源与发展

一、C的起源与初期发展 C的起源可以追溯到1979年&#xff0c;当时丹麦计算机科学家比雅尼斯特劳斯特鲁普&#xff08;Bjarne Stroustrup&#xff09;在贝尔实验室从事计算机科学和软件工程的研究工作。面对项目中复杂的软件开发任务&#xff0c;特别是模拟和操作系统的开发工作…

SDL渲染器和纹理

文章目录 渲染器 (SDL_Renderer)纹理 (SDL_Texture)代码 渲染器 (SDL_Renderer) &#xff1a;它是渲染内容的接口&#xff0c;负责将内容绘制到窗口中。通过SDL_CreateRenderer创建&#xff0c;可以设置渲染器的背景颜色、绘图颜色、透明度等。所有绘图操作&#xff08;如绘制…

题目练习之二叉树那些事儿(续集)

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨个人…

go语言 分布式一致

flowchart TDStart([接收 key]) --> CheckCache{检查是否被缓存}CheckCache -->|是| ReturnCache1[返回缓存值 ⑴]CheckCache -->|否| CheckRemote{是否应当从远程节点获取}CheckRemote -->|是| HashSelect[使用一致性哈希选择节点]HashSelect --> IsRemote{是否…

【STL栈和队列】:高效数据结构的应用秘籍

前言&#xff1a; C 标准模板库&#xff08;STL&#xff09;为我们提供了多种容器&#xff0c;其中 stack&#xff08;栈&#xff09;和 queue&#xff08;队列&#xff09;是非常常用的两种容器。 根据之前C语言实现的栈和队列&#xff0c;&#xff08;如有遗忘&#xff0c;…

Zabbix 7 最新版本安装 Rocky Linux 8

前言 本实验主要在Rocky Linux 中安装Zabbix&#xff0c;其他centos8、Debian、Ubuntu、Alma Linux都可以安装&#xff0c;就是在中间件有点不同。Nginx就要配置一下&#xff0c;官网给的教程也算是很规范的&#xff0c;就是在MySQL上要自己安装&#xff0c;他没有告诉我们&am…

docker里rtsp推流+同一个docker接受流进行部署

1.参考&#xff1a; https://blog.csdn.net/m0_57609406/article/details/140323327 2.dockerfile命令 # 使用官方 Python 基础镜像 FROM python:3.8.18-slim# 设置工作目录 WORKDIR /usr/src/app# 安装必要的软件包&#xff08;FFmpeg、OpenCV、lsof、RTSP工具&#xff09;…

主进程main.js打印中文时终端显示乱码解决方案

{"name": "aaa","version": "1.0.0","description": "first electron app","main": "main.js","scripts": {// 解决乱码的问题"start": "chcp 65001 && no…

git新手使用教程

git新手使用教程 一、安装和初始化配置2、新建仓库3.工作区域和文件状态4.添加和提交文件5 git reset回退版本6 使用git diff查看差异7 使用git rm删除文件8 .gitignore忽略文件9 注册GitHub账号10 SSH配置和克隆仓库11 关联本地仓库和远程仓库12 Gitee的使用 由B站视频教程整理…

【GPTs】Email Responder Pro:高效生成专业回复邮件

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 &#x1f4af;GPTs指令&#x1f4af;前言&#x1f4af;Email Responder Pro主要功能适用场景优点缺点 &#x1f4af;小结 &#x1f4af;GPTs指令 中文翻译&#xff1a; Email Craft 是一款专门用于…

使用yarn,如何编译打包electron?

要使用yarn编译打包Electron应用&#xff0c;可以按照以下步骤操作&#xff1a; 安装Electron Forge或Electron Builder&#xff1a; Electron Forge是一个一体化工具&#xff0c;可以处理Electron应用程序的打包与分发。可以通过yarn安装Electron Forge CLI工具包到项目的devD…

2024下半年软考系统架构师案例分析题试题与答案--ROS机器人操作系统

一、知识点回顾 ROS(Robot Operating System)是一个用于编写机器人软件的框架。它提供了一系列的工具和库,帮助开发者创建复杂的、可以在多种操作系统上运行的机器人应用程序。 ROS的主要特点包括: 分布式计算能力:ROS提供了一种方式让多个计算机或设备协同工作,通过…

uni-app表格带分页,后端处理过每页显示多少条

uni-app表格带分页&#xff0c;后端处理过每页可以显示多少条&#xff0c;一句设置好了每页显示的数据量&#xff0c;不需要钱的在进行操作&#xff0c;在进行对数据的截取 <th-table :column"column" :listData"data" :checkSort"checkSort"…

安川电源模块:YASKAWA CPS-IONB或CPS-I0NB

‌安川电源模块‌是一种直接贴装在印刷电路板上的电源供应器&#xff0c;主要用于为专用集成电路&#xff08;ASIC&#xff09;、数字信号处理器&#xff08;DSP&#xff09;、微处理器、存储器、现场可编程门阵列&#xff08;FPGA&#xff09;及其他数字或模拟负载提供供电。这…