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

使用方法

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 |