video_screenshot_zxd v1.0.5

更新说明

--v1.0.5
通过webpack打包压缩
--v1.0.3
修复手机竖屏拍摄视频播放，截图不完成的问题

一个使用原生js制作的建议截图功能的插件，利用原生的js，canvas生成图片，简单精简，有其他需求可以直接拓展

安装

npm i video_screenshot_zxd -D

使用

在需要引用的文件中导入
import { screenshot,dataURLtoBlob} from 'video_screenshot'

1. screenshot('video','image/png',isBase64,fileName).then(res=>{...}).catch(...)
'video' 表示要截取的 video 的 id
'image/png' 表示返回的 图片格式，支持'image/png' || 'image/jpeg'
isBase64: bool tue 表示返回图片的base64，则 fileName 可不填
            false 表示返回的文件对象，此时需要填写返回文件对象的 fileName

screenshot  函数会返回一个promise图片的base64 的 dataURL 或者 文件对象
            如果设置返回的base64，后面也可以手动调用dataURLtoBlob，转成文件对象返回
eg：screenshot('video','image/png',true,fileName).then(res=>{
        // res => dataURL
        let file = dataURLtoBlob(res,'fileName')
    })
2. dataURLtoBlob 函数 可以将 dataURL 转换成一个文件对象
let file = dataURLtoBlob(dataURL,'fileName')

具体在vue2中使用如下

<template>
    <div class="hello" >
        <div id="div">
        <img id="logo" src="../assets/logo.png" alt="">
        <video :src="src" crossOrigin="anonymous" controls="controls" width="1300" height="760" id="video"></video>
        </div>
        <hr>
        <button @click="JT">截图</button>
        <hr>
        <img v-if="imgBase64" :src="imgBase64" alt="">
    </div>
</template>

<script>
import { screenshot,dataURLtoBlob} from 'video_screenshot_zxd'
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    data(){
        return{
            src:require('../assets/1.mp4'),
            imgBase64:null
        }
    },
    methods:{
        JT(){
            screenshot('video','image/png',true).then(res=>{
                console.log(res);
                this.imgBase64 = res;

                let file = dataURLtoBlob(res,'截图文件')

                console.log(file)
            })
        }
    }
}
</script>