canvas压缩图片或者进行视频抓拍

最近在项目中遇到一个需要抓拍正在播放的视频中的图片，就像截图一样进行实时抓拍，并且使用了base64进行上传，要求图片不能大于2M.
先上代码

public captureVideo(id) {//获取video的dom节点let video = document.getElementById(id).firstChild;//创建一个canvas画布let canvas = document.createElement("canvas");//设置为2dlet ctx = canvas.getContext("2d");//下面压缩图片，调整比例canvas.width = 1400;canvas.height = 800;//在画布上画出视频当前图片ctx.drawImage((video as any), 0, 0, canvas.width, canvas.height);//获取图片base64格式this.dialogImageUrl = canvas.toDataURL();//提交数据this.form.imglist= [{imgdata:this.dialogImageUrl.replace("data:image/jpeg;base64,","").replace("data:image/png;base64,",""),extname: "jpg"}]}

我的video节点是包裹在有id的div下的，video本身没有设置id，所以用这种方式获取
而（video as any）是因为项目是ts，使用js直接可以用video
简而言之，抓拍视频的流程是：
1：获取video的dom节点
2：创建canvas的dom节点
3：设置canvas为2d
4：设置canvas的高于宽
5：使用drawImage方法将video画在canvas上
6：canvas.toDataURL获取图片的base64格式
直接将此base64放在img的src属性下，就能显示出图片
压缩图片只需要在第4步中，把canvas的高和宽调小。相当于将一张很大的图片画在一张很小的布上，自然就能达到压缩图片的目的。

canvas压缩图片或者进行视频抓拍相关推荐

android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
JavaScript 使用canvas压缩图片
压缩思路 JS 的图片压缩,一般是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果. 实现过程 (1)获取上传 Input 中的图片对象 File: (2)将图 ...
canvas压缩图片的秘密
开篇首先明确canvas只适合压缩大的图片,图片size过小并不能有什么用处.那么为什么size过小canvas并不能压缩呢如果不压缩质量,经过canvas的图片变大了图片在经过img标签的时候 ...
使用html5+的plus调起相机拍照，使用canvas压缩图片，转成base64传到后台
html代码: <div class="form-com door"><label for="">门头照:</label>& ...
canvas 压缩图片上传
问题:前端开发过程中难免会将数据提交到后台,但若是提交的数据过大,特别上传图片这类需求,如果不对上传的图片进行压缩处理,就难免会出现请求时间过长的情况,对于用户体验肯定就不是太友好,那么这时候该如何将 ...
前台图片Canvas压缩上传小结
需求来源:之前有个提交审核表单的业务,表单中含有大量附件图片,大约有20多张吧,为了省事,采用的同步上传,一次需要上传很多照片,本来单张图片限制为200KB,这样子总图片大小约为5MB左右,想想也可以 ...
图片上传时用Canvas 压缩和加水印
用菜鸟教程模拟的菜鸟对应链接 https://www.runoob.com/try/try-cdnjs.php?filename=tryhtml5_canvas_tut_img <!DOCTY ...
十分钟教会你原生JS压缩图片，极其精简版
十分钟教会你原生JS压缩图片,极其精简版原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路先通过input标签获 ...
前端实现压缩图片的功能（vue-element）
前言: 随着现在手机像素,拍照功能越来越好,随之而来的是本地图片越来越大,那么如何更好的将本地图片上传到后端接口呢?这是后台管理系统常见的场景和头疼的问题,这里分享下个人的方法. 实现效果: 如下图所 ...

canvas压缩图片或者进行视频抓拍

canvas压缩图片或者进行视频抓拍相关推荐

最新文章

热门文章