如何使用html5 canvas画布对本地视频进行截图并上传至服务器

最新推荐文章于 2024-08-13 09:34:30 发布

smart_hang

最新推荐文章于 2024-08-13 09:34:30 发布

阅读量5.4k

点赞数 7

分类专栏： java web java

本文链接：https://blog.csdn.net/hfutzhouyonghang/article/details/81394733

版权

java web 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

java

7 篇文章 0 订阅

订阅专栏

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>截图系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body style="width: 100%;height: 100%">
<div align="center">
<video style="width: 1920px;height: 1080px" id="video" controls>Your browser can't support HTML5 Audio</video>
<p><input type="file" id="file" onchange="onInputFileChange()"><input class="cut" type="button" value="截图"  id="buttons_cut" onclick="cut()"></p>
<canvas id="canvas"></canvas>
</div>
<script>
    // 打开本地视频
    function onInputFileChange() {
        var file = document.getElementById('file').files[0];
        var url = URL.createObjectURL(file);
        console.log(url);
        document.getElementById("video").src = url;
    }



    // 使用canvas对视频进行截图
    function cut(){
       var canvas = document.getElementById('canvas');
       var video = document.getElementById('video');
       console.log('视频尺寸：'+video.style.width+'*'+video.style.height);
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
       console.log(canvas.width);
       console.log(canvas.height);
       var ctx = canvas.getContext('2d');
       ctx.drawImage(video, 0, 0,1920,1080);
       var base64 = canvas.toDataURL('images/png');
       upload(base64);

   }

   // 上传图片

    function upload(image) {
        var imgFile=dataURLtoFile(image,"img.png");
        var xhr=new XMLHttpRequest();
        var fd=new FormData();
        xhr.open('POST','/springStudy/user/multifiles');
        fd.append("multipartFile",imgFile);
        xhr.send(fd);
        console.log('上传json！')
    }

    //将图片Base64 转成文件

    function dataURLtoFile(dataurl, filename) {
        console.log("转文件")
        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);
        }
        return new File([u8arr], filename, {type:mime});
    }




</script>

</body>
</html>

spring mvc后端代码:

@RequestMapping(value = "/multifiles")
    public void receivefiles(HttpServletRequest request, HttpServletResponse response, @ModelAttribute UploadFile uploadFile){

        System.out.println("收到请求");
        MultipartFile multipartFile=uploadFile.getMultipartFile();
        String filename=multipartFile.getOriginalFilename();
        try{
            System.out.println(request.getServletContext().getRealPath("/image"));
            // path="G:tomcatupload"
            File file=new File(path,String.valueOf(System.currentTimeMillis())+filename);
            if(!file.exists()){

            }
            multipartFile.transferTo(file);
        }catch (IOException e){
            e.printStackTrace();
        }

    }