react 截取视频随意一帧裁剪图片存为base64格式

封装了一个Modal弹框作为组件使用，需要传递进来代码中标注的一些参数

项目中使用了react antd 以及 react-image-crop

需要安装8.6.4版本的 react-image-crop（截取图片插件），例如：yarn add react-image-crop@8.6.4

import React, { useEffect, useState } from 'react';
import { Modal, Button } from 'antd';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';let imageRef = null;
let videoWidth = 0;
let videoHeight = 0;const Index = props => {// visible 控制弹框开关 handleCancel 弹框关闭事件 handleOk 弹框点击确定 inputVideoUrl 视频的url  aspect 需要截取图片的比例 例如 1 / 1const { visible, handleCancel, handleOk, inputVideoUrl, aspect } = props;const [src, setSrc] = useState(''); // 当前视频的图片urlconst [croppedImageUrl, setCroppedImageUrl] = useState(''); // 截取之后的视频的urlconst [crop, setCrop] = useState({unit: '%',width: 30,aspect,}); // 裁剪组件的基本参数// 初始化数据useEffect(() => {imageRef = null;videoWidth = 0;videoHeight = 0;const video = document.createElement('video');video.setAttribute('width', '300');video.setAttribute('height', '300');video.setAttribute('src', inputVideoUrl);video.setAttribute('crossOrigin', 'anonymous');video.addEventListener('loadeddata', () => {const { videoWidth: w, videoHeight: h } = video;videoWidth = w;videoHeight = h;});}, []);// 手动截取视频画面作为封面const buttonFun = () => {const canvas = document.createElement('canvas');const video = document.getElementById('video');canvas.width = videoWidth;canvas.height = videoHeight;const context = canvas.getContext('2d');context.clearRect(0, 0, videoWidth, videoHeight); // 清除画布内容context.drawImage(video, 0, 0, videoWidth, videoHeight); // 将绘制的图像用img显示setSrc(canvas.toDataURL('image/png'));};// 图片加载完之后的信息const onImageLoaded = image => {imageRef = image;};// 裁剪窗口的变化const onCropChange = cropData => {setCrop(cropData);};const getCroppedImg = (image, cropData) => {const canvas = document.createElement('canvas');const scaleX = image.naturalWidth / image.width;const scaleY = image.naturalHeight / image.height;canvas.width = cropData.width;canvas.height = cropData.height;const ctx = canvas.getContext('2d');ctx.drawImage(image,cropData.x * scaleX,cropData.y * scaleY,cropData.width * scaleX,cropData.height * scaleY,0,0,cropData.width,cropData.height);return canvas.toDataURL('image/png');};const makeClientCrop = cropData => {if (imageRef && cropData.width && cropData.height) {const url = getCroppedImg(imageRef, cropData);setCroppedImageUrl(url);}};// 裁剪完成const onCropComplete = cropData => {makeClientCrop(cropData);};return (<Modaltitle="截取封面"width="50%"visible={visible}maskClosable={false}destroyOnCloseonCancel={handleCancel}onOk={() => {handleOk(croppedImageUrl);}}><div className="App"><div>视频</div><div id="video_div"><videoid="video"width="300"height="300"src={inputVideoUrl}crossOrigin="anonymous"controls="controls"className="video_d"><track kind="captions" />您的浏览器不支持 video 标签。</video></div><Button type="primary" onClick={buttonFun} style={{ margin: '20px 0' }}>作为视频封面图</Button><div style={{ padding: '20px 0' }}>截取封面图</div><div style={{ width: 300 }}>{src && (<ReactCropsrc={src}crop={crop}ruleOfThirdsonImageLoaded={onImageLoaded}onComplete={onCropComplete}onChange={onCropChange}/>)}</div><div style={{ padding: '20px 0' }}>封面图预览</div><div>{croppedImageUrl && <img alt="Crop" src={croppedImageUrl} />}</div></div></Modal>);
};export default Index;

react 截取视频随意一帧裁剪图片存为base64格式相关推荐

ffmpeg（ubuntu16.04）：视频抽成帧（图片）/图片合成视频
· 视频抽成帧(图片): cd 到视频所在目录下: 输入: ffmpeg -i output-processed.avi -q:v 2 -f image2 frame_%06d.jpg (注:上述代码 ...
多线程截取视频为每帧
1 多线程截取视频为每帧功能: 将多个视频文件进行抽帧,每个视频开启一个线程 #!/usr/bin/python3.6 # -*- coding: utf-8 -*- # @Time : 2021/ ...
使用js截取视频指定秒数的图片
使用js截取视频指定秒数的图片点击按钮,选择本地视频后,截取指定秒数的图片运行结果如下图: 直接上代码: 1.html代码 <!DOCTYPE html> <html>&l ...
视频怎么抽帧变成图片格式
最近有很多朋友在问,如何剪辑视频,比如对多个视频进行抽帧变成图片呢?今天小编给大家分享一个新的剪辑技巧,下面一起来试试. 所需工具视频.图片素材若干操作步骤首先,要将准备好的所有视频素材都保存在 ...
elementUI压缩图片和将图片转成base64格式
为了降低资源服务器的消耗.有些时候需要前端压缩图片,转码等一些处理. 一.Base64的优点和缺点图片转换成base64格式的优缺点 1. 优点 (1)base64格式的图片是文本格式,占用内存小, ...
py读取本地图片并返回图片给前端base64格式
py读取本地图片并返回图片给前端base64格式直接贴代码,有用请收藏 from fastapi import FastAPI from get90V import resBody, getRewr ...
python实现截取视频中特定帧进行保存功能
# -*- encoding: utf-8 -*- # @File : screenshot.py # @Author: Mr. Luo # @Date: 2021/11/3 14:30 ''' 读取 ...
python把视频取帧_Python批量截取视频某一帧
该文讲了如何调用opencv这个包对一个视频的某段时间进行均匀截多张图图(当然也可以是多个时间,也可以是不均匀时间,也可以是单张图片-都是可以自己定的呀) 大家都是成熟的Python人了,所以很多细节 ...
【前端图片转化】 base64格式转为 File文件类型
下面的函数能将base664格式用于已知bseae64 转File格式上传求点赞!! 关注!! 收藏 !! base64格式的图片不能直接上传到oss图片服务器的,需要转换成file文件流的形式上 ...
将图片转化成base64格式
// 如果用户选择了图片就将图片转化为base64位的格式进行存储和使用// 第一步:先读取文件const base = new FileReader()// console.dir(base)// ...

react 截取视频随意一帧裁剪图片存为base64格式

react 截取视频随意一帧裁剪图片存为base64格式相关推荐

最新文章

热门文章