electron 视频抓图并保存图片到本地

1. 思路:

1.1 通过canvas生成一块画布,在画布上绘制图形
     let videoEl = document.getElementById("testVideo");
     let params = {
           videoEl,
           quality:0.95
     }
     let canvasEl = document.createElement('canvas');
     canvasEl.width = videoEl.width;
     canvasEl.height = videoEl.height;   
     let ctx = canvasEl.getContext('2d');
     ctx.drawImage(videoEl, 0, 0, canvasEl.width, canvasEl.height);
     const base64Url = canvasEl.toDataURL('image/jpeg', quality);
     let fileName = 'test.jpg'
1.2 利用node.js 的fs.writeFile方法保存图片到本地
fs.writeFile(file,data,callback)
file 文件名或文件描述
data 写入的数据
callback 回调函数
2.代码片段
2.1 js
async screenshotFn(){
     let videoEl = document.getElementById("testVideo");
     let params = {
           videoEl,
           quality:0.95
     }
     let canvasEl = document.createElement('canvas');
     canvasEl.width = videoEl.width;
     canvasEl.height = videoEl.height;   
     let ctx = canvasEl.getContext('2d');
     ctx.drawImage(videoEl, 0, 0, canvasEl.width, canvasEl.height);
     const base64Url = canvasEl.toDataURL('image/jpeg', quality);
     let fileName = 'test.jpg'
     //下面是调用node.js 的fs.writeFile方法保存图片到本地
     await window.ipcApis.saveFile({ fileName: fileName, data: base64Url });
 }
2.2 electron/ipcModule/ipcMain.js
const { ipcMain, app, clipboard } = require("electron");
const path = require("path")
const fs = require("fs");
const os = require('os');
import logger from "@/utils/log"
import { store } from "@/utils/store";
// 注册主进程通信
function registerIpcMainMsgModule(win) {
    saveFile(),
    setStore(),
    getStore()
}

function saveFile() {
    ipcMain.on("save-file", (event, params) => {
        let { fileName, data } = params;
        const dir = store.get("systemPath");
        const buffer = Buffer.from(data.replace(/^.*base64,/, ""), 'base64');
        fs.writeFile(path.join(dir, fileName), buffer, (err) => {
            logger.error(err);
            if(err){
                event.returnValue = false;
            }
            event.returnValue = true;
        });
    })
}

// 设置store
function setStore() {
    ipcMain.handle("set-store", (event, item) => {
        store.set(item.key, item.val)
    })
}
// 获取store
function getStore() {
    ipcMain.handle("get-store", (event, key) => {
        return store.get(key)
    })
}

export {
    registerIpcMainMsgModule,
}
相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
安静读书2 小时前
Python解析视频FPS(帧率)、分辨率信息
python·opencv·音视频
佑华硬盘拷贝机3 小时前
音频档案批量拷贝:专业SD拷贝机解决方案
音视频
EasyNVR3 小时前
NVR管理平台EasyNVR多个NVR同时管理:全方位安防监控视频融合云平台方案
安全·音视频·监控·视频监控
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue