html與js實現影片截圖

語言: CN / TW / HK

實現效果

先看看效果,而且點選圖片即可檢視demo:

實現思路

1、分別獲得遠端 mp4 、本地攝像頭、本地 mp4 上傳檔案預覽,即準備好 vedio 節點。

如下程式碼:

<video id="video" width="320" height="auto" controls preload="auto">
    <source id="videoSource" src="mov_bbb.mp4" type="video/mp4">
    您的瀏覽器不支援Video標籤。
</video>

2、向已有的或動態建立的 canvas 畫布上繪製圖片,程式碼如下:

ctx.drawImage(video, 0, 0, video.offsetWidth, video.offsetHeight);

具體用法請參考: https://www.w3school.com.cn/html5/canvas_drawimage.asp

3、canvas 轉換為 dataURL,用來展示截圖。

4、dataURL 轉換為 Blob 物件,構造 FormData 物件,Ajax(或 fetch 和 axios)提交圖片檔案到伺服器。

或者,在第3步,把 Canvas 轉換為 Blob 物件,使用 URL.createObjectURL(blob) 來展示圖片,在第4步就省去了“ dataURL 轉換為 Blob 物件 ”操作。

參考文章

  1. https://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/
  2. https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
  3. https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
  4. https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
  5. https://developer.mozilla.org/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications
  6. https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

附錄:DataURL、Blob、File、Image之間的關係與js轉換

1、canvas轉dataURL

function canvasToDataURL(canvas, format, quality) {
    return canvas.toDataURL(format||'image/jpeg', quality||1.0);
}

2、dataURL轉image

function dataURLToImage(dataurl){
    var img = new Image();
    img.src = d;
    return img;
}

3、 canvas2.toBlob轉image

canvas.toBlob(function(blob){
    var url = URL.createObjectURL(blob);
    image.src = url;
    image2.onload = function(){
        URL.revokeObjectURL(url);
    };
});

4、dataURL轉Blob物件

function dataURLToBlob (dataurl){
    var arr = dataurl.split(',');
    var mime = arr[0].match(/:(.*?);/)[1];
    var bstr = atob(arr[1]);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}