electron+react截取图片并保存至本地

组件中：

// 截图事件
captureImg = () => {
    if (!this.state.isShowImg) {
      message.info("请先开启图像");
      return;
    }
    message.info("图像截取中，请稍候");
    let imgObject = new Image();
    imgObject.src = this.state.realImg;
    imgObject.setAttribute("crossOrigin", "anonymous");
    let canvas = document.createElement("canvas");
    canvas.width = this.state.cameraData.imageConfig.width;
    canvas.height = this.state.cameraData.imageConfig.height;
    imgObject.onload = () => {
      canvas
        .getContext("2d")
        .drawImage(imgObject, 0, 0, canvas.width, canvas.height);
      let base64Image = canvas.toDataURL("image/jpeg");
      sessionStorage.setItem("base64Image", base64Image);
      this.setState(
        {
          captureImg: base64Image,
          isCaptureImg: true,
        },
        () => {
          message.info("图像截取成功，可进行保存");
        }
      );
    };
    imgObject.onerror = () => {
      message.error("图像截取失败，请重新截取");
    };
  };
// 删除截图
  deleteImg = () => {
    clearInterval(this.saving);
    sessionStorage.removeItem("saveImageSuccess");
    this.setState({
      captureImg: null,
      isCaptureImg: false,
    });
    sessionStorage.removeItem("base64Image");
  };
  // 保存截图判断，具体操作在main.js主进程中
  saveImg = () => {
    if (!sessionStorage.getItem("base64Image")) {
      message.info("暂无可保存截图");
    }
    // 保存截图开启轮询判断是否保存成功
    this.saving = setInterval(() => {
      console.log("轮询图片是否保存成功");
      if (
        sessionStorage.getItem("saveImageSuccess") &&
        sessionStorage.getItem("saveImageSuccess") == "cancel"
      ) {
        console.log("取消保存");
        sessionStorage.removeItem("saveImageSuccess");
        clearInterval(this.saving);
      }
      if (
        sessionStorage.getItem("saveImageSuccess") &&
        sessionStorage.getItem("saveImageSuccess") == "success"
      ) {
        this.deleteImg();
        clearInterval(this.saving);
      }
      if (
        sessionStorage.getItem("saveImageSuccess") &&
        sessionStorage.getItem("saveImageSuccess") == "fail"
      ) {
        message.info("图片保存失败，请重新保存");
        clearInterval(this.saving);
      }
    }, 2000);
  };

// html
...
<img
  style={{
    cursor: this.state.isShowImg
      ? ""
      : this.state.isCaptureImg
      ? ""
      : "not-allowed",
  }}
  src={this.state.isCaptureImg ? icon4 : icon3}
  alt=""
  onClick={() => {
    this.state.isCaptureImg
      ? this.deleteImg()
      : this.captureImg();
  }}
/>
<img
   style={{
     cursor: this.state.isCaptureImg ? "" : "not-allowed",
   }}
   src={icon5}
   alt=""
   id="saveImage"
   onClick={this.saveImg}
 />
...

preload.js（electron预置文件）
由于main.js获取不到缓存，就在preload.js渲染进程中发布，在main.js主进程中接收后再调用fs文件系统进行保存图片至本地

window.ipcRenderer = require('electron').ipcRenderer;
// 保存截图回调监听
window.ipcRenderer.on("saveImageSuccess", (event, data) => {
  console.log("saveImageSuccess",data)
  sessionStorage.setItem("saveImageSuccess",data);
});
// 监听保存图片
window.addEventListener('click', (e) => {
  if(e.srcElement.id == 'saveImage'){
    if(sessionStorage.getItem("base64Image")) window.ipcRenderer.send('saveImage',sessionStorage.getItem("base64Image"));
  }
})

main.js（主进程入口文件）

const {app, BrowserWindow, ipcMain, dialog  } = require('electron');
const fs = require('fs');
// 监听保存图片
  ipcMain.on('saveImage', (event,data)=> {
  // dialog.showSaveDialog为electron功能
    dialog.showSaveDialog({
      title: "保存"
    }).then(result => {
      if(!result.canceled){
        if(data){
          let base64 = data.replace(/^data:image\/\w+;base64,/, "");
          // 利用nodejs的fs文件系统功能进行保存图片，需要先将base64头去掉
          fs.writeFile(result.filePath, Buffer.from(base64, 'base64'),(err) => {
            if(err){
              mainWindow.webContents.send('saveImageSuccess', 'fail');
              console.log("保存相机截图失败",err);
            }else{
              mainWindow.webContents.send('saveImageSuccess', 'success');
              console.log("保存相机截图成功");
            }
          });
        }
      }else {
        mainWindow.webContents.send('saveImageSuccess', 'cancel');
      }
    }).catch(err => {
      console.log(err)
    })
  });

注意：
其中涉及到electron渲染进程与主进程通信问题，可自行百度。