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,
}
相关推荐
neter.asia11 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫12 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年31 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_32 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891134 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾36 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu38 分钟前
前端 Canvas 绘画 总结
前端
安步当歌39 分钟前
【WebRTC】视频编码链路中各个类的简单分析——VideoStreamEncoder
音视频·webrtc·视频编解码·video-codec
顾北川_野40 分钟前
Android CALL关于电话音频和紧急电话设置和获取
android·音视频
CodeToGym43 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化