image-time-line

视频编辑帧功能，同抖音编辑视频帧功能，附带有拖动插件

使用方法

npm安装

npm i image-time-line

imageTimeLine方法使用

1.引入

import { imageTimeLine } from "image-time-line";

2.视频切片使用示例

import { videoSlice } from "video-slice";
import { imageTimeLine }  from "image-time-line";
const inputDom = document.getElementById("chooseFile");
const imgsDom = (document.getElementById("imgs")) as HTMLElement;
const list:Array<string> = [];
inputDom?.addEventListener("change",(res)=>{
    const input:any = res.target
    const video:any = document.getElementById("app");
    if(video){
        //方法一：切片完成再添加
        const videoToImg = videoSlice({
            width:100,
            file:input.files[0],
            success:()=>{
                video.src = videoToImg.getSrc();
                //快速切片
                videoToImg.fastStart();
            },
            backImgFn:(res)=>{ //切片返回的地方
                
            },
            finish:()=>{
                console.log("完成",list)
                const timeLineObj = imageTimeLine({
                    video,
                    imgsDom,
                    imgs:list,
                    total:list.length,
                })
            }
        })
        //方法二：先占位然后一次性全部添加
        const timeLineObj = imageTimeLine({
            total:7,
            placeholderImg:'https://campus.wo.cn/cos/static/my/noData.png',
            video,
            imgsDom,
        })
        const videoToImg2 = videoSlice({
            width:100,
            file:input.files[0],
            success:()=>{
                video.src = videoToImg2.getSrc();
                //快速切片
                videoToImg2.fastStart();
            },
            backImgFn:(res)=>{ //切片返回的地方
                list.push(res);
                
            },
            finish:()=>{
                console.log("完成",list)
                timeLineObj.changeAll(list)
            }
        })
        //方法三：不知道图片张数，一张一张的添加
        const timeLineObj3 = imageTimeLine({
            video,
            imgsDom,
        })
        const videoToImg3 = videoSlice({
            width:100,
            file:input.files[0],
            success:()=>{
                video.src = videoToImg3.getSrc();
                //快速切片
                videoToImg3.fastStart();
            },
            backImgFn:(res)=>{ //切片返回的地方
        
                // 方法三：一张一张的添加
                timeLineObj3.add(res);
            },
            finish:()=>{
                console.log("完成")
            }
        })
        
    }
})

参数结构

参数	说明	类型	参数是否必传
video	视频dom节点	HTMLVideoElement	是
imgsDom	图片列表显示的dom	HTMLElement	是
total	图片的总数	number	否
imgs	需要显示的图片数组	Array	否
placeholderImg	默认的占位图片地址	string	否
changeScale	拖动指针会触发该函数，返回整体的移动占比	(scale:number)=>void	否

方法说明

方法名称	说明	类型	参数说明
move	设置指针位移	(scale:number)=>void	scale：位移比例，最大1
getImgs	返回全部图片	()=>Array	-
add	原有基础上添加图片	(imgs:string｜Array)=>void	imgs：图片或者图片数组
changeIndex	替换指定的index图片	(img:string,index?:number)=>void	img：图片，index：需要替换的index,如果没传，就自动匹配下一个需要替换的占位图片
changeAll	直接替换全部图片	(imgs:Array)=>void	imgs：图片数组
remove	指定删除第几张图片	(index:number)=>void	-
clear	清除全部图片	()=>void	-
clearPlaceholderImg	清除全部占位图片	()=>void	-

拖动插件addMouseListener方法使用

1.引入

import { addMouseListener } from "image-time-line";

2.视频切片使用示例

import { addMouseListener } from "image-time-line";
const mouseObj = addMouseListener(Dom,{
        type:'x',
        changeStatus:(res)=>{
          console.log(res)
        },
        change:(res)=>{
          console.log(res)
        }
      });

拖动插件参数结构

参数	说明	类型	参数是否必传
dom	需要拖动的节点	HTMLElement	是
type	移动方向	默认x、y轴，可传"x"或"y"	否
left	初始的left	number	否
top	初始的top	number	否
maxX	最大x轴位移	number	否
maxY	最大y轴位移	number	否
change	位移变化触发函数	(value:{x?:number,y?:number})=>void	否
changeStatus	拖动状态变化触发函数	(status:string)=>void	否

拖动插件方法说明

方法名称	说明	类型	参数说明
move	移动比例	(value: Record<string, number>)=>void	value:{ x:10, y:10 },x轴和y轴需要移动的值 单位px