Electron保存摄像头截图到本地

页面

<div>
    <video id="local_video" autoplay></video>
    <canvas style="display: none" id="canvas"></canvas>
</div>

步骤

1.获取摄像头的视频显示到 video 标签里

this.webcamStream = await navigator.mediaDevices.getUserMedia(this.mediaConstraints);
document.getElementById("local_video").srcObject = this.webcamStream;

2.将截图j加载到canvas

const canvas = document.getElementById("canvas");
var ctx = canvas .getContext("2d");
ctx.drawImage( document.getElementById("local_video"), 0, 0, 640, 480);

3.获取图片blob数据

const imgData = canvas
                .toDataURL("image/png")
                .replace("image/png", "image/octet-stream");
const imgBlob = this.dataURItoBlob(imgData);

base64转blob 

/**
* base64 转 blob 对象，文件上传
 * 转载自：http://blog.csdn.net/hsany330/article/details/52575459
 * @param dataURI
 * @returns {Blob}
 */
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {type: mimeString});
}

4.将数据保存到本地

let path = "xxxxxxxx"
let name = new Date().getTime();
let fileName = name + '.png'
console.log("[截图] 生成png：", fileName);
saveData(path, imgBlob, fileName).then(() => {
    console.log("[截图] 保存成功 ,地址：", path + fileName);
})

保存方法

import fs from 'fs'
import path from 'path'

/**
 * 将blob保存到本地
 * */

async function  dirExists(dir) {
    let isExists = await getStatus(dir);

    if(isExists && isExists.isDirectory()){
        return true;
    }else if (isExists){
        return false;
    }
    //该路径不存在
    let tempDir = path.parse(dir).dir;//拿到上级路径
    //递归判断
    let status = await dirExists(tempDir);
    let mkdirStatus
    if(status){
        mkdirStatus = await mkdir(dir)
    }
    return mkdirStatus;

}

function getStatus(filePath) {
    return new Promise((resolve,reject)=>{
        fs.stat(filePath,(err,stats)=>{
            if(err){
                resolve(false);
            }else{
                resolve(stats);
            }
        })
    })
}

/***
 * 创建路径
 * */
function mkdir(dir){
    return new Promise((resolve,reject)=>{
        fs.mkdir(dir,{recursive:true},(err)=>{
            if(err){
                resolve(false);
            }else{
                resolve(true);
            }
        })
    })
}

async function saveData(dirPath,bufferData,fileName) {
    return  new Promise(async (resolve,reject)=>{
        let mkdirStatus = await dirExists(dirPath);
        console.log(dirPath);
        if(mkdirStatus){
            let reader = new FileReader();
            reader.readAsArrayBuffer(bufferData)
            reader.onload = () => {
                let buffer = new Buffer(reader.result);
                fs.writeFile(dirPath + fileName, buffer, {}, (err, res) => {
                    resolve()
                });
            };
        }
    })

}

export default saveData