如何使用html5 canvas畫布對本地視訊進行截圖並上傳至伺服器

阿新 • • 發佈：2019-01-02

前端程式碼：

<!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();
        }

    }

如何使用html5 canvas畫布對本地視訊進行截圖並上傳至伺服器

前端程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Unity3d 截圖並上傳到伺服器

最近專案所需，需要捕抓影象並上傳到伺服器。參考了別人的文章，加以改動。寫此部落格以記錄。參考部落格設定全域性變數 public Camera cutFrameCamer; Rect canvas; 開始截圖 canvas.Set(0, 0, Screen.w

HTML5 本地裁剪圖片並上傳至伺服器 canvas圖片上傳 canvas圖片裁剪

很多情況下使用者上傳的圖片都需要經過裁剪，比如頭像啊什麼的。但以前實現這類需求都很複雜，往往需要先把圖片上傳到伺服器，然後返回給使用者，讓使用者確定裁剪座標，傳送給伺服器，伺服器裁剪完再返回給使用者，來回需要 5 步。步驟繁瑣不說，當很多使用者上傳圖片的時候也很影響伺服器

HTML5 本地裁剪圖片並上傳至伺服器（老梗）

很多情況下使用者上傳的圖片都需要經過裁剪，比如頭像啊什麼的。但以前實現這類需求都很複雜，往往需要先把圖片上傳到伺服器，然後返回給使用者，讓使用者確定裁剪座標，傳送給伺服器，伺服器裁剪完再返回給使用者，來回需要 5 步。步驟繁瑣不說，當很多使用者上傳圖片的時候也很影響伺服器效

vue 電腦端調攝像頭拍照，canvas轉base64，base64轉圖片檔案並上傳到伺服器

VUE（用了iview）： <template> <div id='cameraUpload'> <Form ref='member' :label-width='120' :model='member' :rules='memb

【java小程式】利用ffmpeg對視訊進行截圖操作

ffmpeg程式對視訊進行的截圖的命令如下語法如下： ffmpeg.exe -ss 00:00:01 -i spring.mp4 -vframes 1 bb.jpg 00:00:01 擷取視訊圖片的時間。 spring.map4 需要擷取的視訊名稱。 1

selenium下對指定元素進行截圖

Selenium本身是可以支援截圖的，包括全屏和元素的截圖；只是對於不用的瀏覽器的相容性有差異而已。具體差異如下： Chrome FireFox IE Edge PhantomJS 全屏截圖可視區域可視區域可視

HTML5+Canvas+jQuery調用手機拍照功能實現圖片上傳（二）

customer mkdir 狀態保存 ont false lan else if 項目 action 上一篇僅僅講到前臺操作，這篇專門涉及到Java後臺處理。前臺通過Ajax提交將Base64編碼過的圖片數據信息傳到Java後臺，然後Java這邊進行接收處理。通過

android視訊播放截圖並製作成gif圖片

導言：根據文章標題，按三步走，一、視訊播放；二、連續截圖；三、轉換成gif。視訊播放很自然想到用MediaPlayer或者VideoView，但我在這裡踩了幾個坑，寫在這裡也希望別人少走點彎路。首先，是MediaPlayer+SurfaceView的坑，如果只

html2canvas.js截屏並上傳到後臺

html 上傳 int ren end clas rev fff base64 $("#example1").on("click",function(event){ if(confirm("是否上傳")){ 　　event.preventDefault(); 　　

nginx優化-利用nginx限制HTTP的請求方法--防止指令碼被上傳至伺服器執行該指令碼對系統的破壞

利用nginx限制HTTP的請求方法 $request_method --防止指令碼被上傳至伺服器執行該指令碼對系統的破壞可以上傳檔案，但是不能讓指令碼檔案執行成功例如：站點目錄下有一個/image目錄，這個目錄是使用者上傳的一些圖片，不能阻止使用者上傳圖片，但要阻止使用者用特殊的方法執行裡面的檔

HTML5 檔案域+FileReader 分段讀取檔案並上傳到伺服器(六)

說明：使用Ajax方式上傳，檔案不能過大，最好小於三四百兆，因為過多的連續Ajax請求會使後臺崩潰，獲取InputStream中資料會為空，尤其在Google瀏覽器測試過程中。 1.簡單分段讀取檔案為Blob，ajax上傳到伺服器 <div class="cont

HTML5 檔案域+FileReader 讀取檔案並上傳到伺服器(三)

一、讀取檔案為blob並上傳到伺服器 HTML <div class="container">  <input type="file" id="file" /> <input type="bu

c#將本地檔案上傳至伺服器（內網）

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; u

Hadoop:本地檔案（window系統）定時獲取檔案並上傳至HDFS檔案(兩個虛擬機器)系統 Java 實現

實現功能：定時日誌採集並上傳至HDFS檔案系統的Java API實現環境+工具：windows + 虛擬機器Centos * 2 + eclipse + windows下編譯的Hadoop jar包 + Hadoop叢集一、流程 1）啟

使用JAVA線上下載圖片至本地，並上傳至FTP

1.首先我們需要將圖片下載至本地。相關操作類如下所示： /** * 下載檔案到本地 * * @param urlString * 被下載的檔案地址 * @param filename * 本地檔名

【TortoiseGit】建立本地倉庫並上傳至遠端倉庫

今天早上弄了一早上，老是失敗，所以這裡把踩過的坑記錄下來，以後也可以看看。一. 新建遠端倉庫在網頁端Github建立遠端倉庫。 <1>

HTML5呼叫攝像頭+視訊特效+錄製視訊+錄音+截圖+變聲+濾波+音訊視覺化

1.寫在前面根據最近的學習，寫了一個demo, 可以通過navigator.mediaDevices.getUserMedia()方法呼叫電腦攝像頭，並實現了錄製音訊，錄製視訊，對攝像頭的內容進行截圖下載；通過AudioContext使用web audio

Qt學習筆記-使用QScreen對螢幕進行截圖（可全屏，可部分）

執行截圖如下：原始碼如下： widget.h #ifndef WIDGET_H #define WIDGET_H #include <QWidget> namespace

C#呼叫命令列執行python指令碼，這個辦法可以呼叫python第三方模組和對本地檔案進行操作

string pythonScriptPath = Server.MapPath(@"~\pythonScript");//python指令碼所在的目錄 ProcessStartInfo start = new Pro

如何使用html5 canvas畫布對本地視訊進行截圖並上傳至伺服器

相關推薦