关于在页面中截图并上传操作

之前弄的一个项目中遇到一个需求就是对视频定时截图，并上传截图。

一开始我是用游览器的下载功能，然后让程序访问下载路径。这样实现的，后来发现部署就出现逻辑上的问题。

根据网上查资料，终于在我的页面上实现了。我参考的是这个资料 https://www.w3cschool.cn/article/27485024.html和https://www.w3cschool.cn/article/27485024.html

基本思路是用canvas截图，然后将图片转换为base64文件，加入fromdata上传，上代码：

function cheis(){
        //获取video 用canvas进行截图
        const video = document.getElementById('video');
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx.drawImage(video, 0, 0);


        // download picture
        var base64=canvas.toDataURL('image/png');
        //将图片转换成base64文件
        var imgfile=dataURLtoFile(base64,'signature.png');
        var xhr=new XMLHttpRequest();
        var fd=new FormData();
        //请求后台接口
        xhr.open('POST','http://localhost:9090/file/upload');
        fd.append("file",imgfile,imgfile.name);
        xhr.send(fd);
    }

    function dataURLtoFile(dataurl, filename) {
//将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        this.fileList = new File([u8arr], filename, {type:mime});
        return this.fileList;
    }

    var int;
    //定时循环函数
    function start1(){
        int=self.setInterval(cheis,2700)
        return int
    }

后台代码，详细代码我不贴了，根据自己需求来：

@PostMapping("/upload")
    public String upload(@RequestParam MultipartFile file) throws Exception {

}