之前弄的一個專案中遇到一個需求就是對視訊定時截圖，並上傳截圖。

一開始我是用遊覽器的下載功能，然後讓程式訪問下載路徑。這樣實現的，後來發現部署就出現邏輯上的問題。

根據網上查資料，終於在我的頁面上實現了。我參考的是這個資料 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 {

}