页面
<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