electron另存为图片

最新推荐文章于 2025-03-07 15:55:23 发布

造糖主义

最新推荐文章于 2025-03-07 15:55:23 发布

阅读量1.6k

点赞数

文章标签： electron

本文链接：https://blog.csdn.net/weixin_45408578/article/details/122336853

版权

这篇博客介绍了如何在Vue应用中利用 Electron 的 remote 模块和 fs 模块，通过 ref 获取 DOM 中的 img 元素路径，并实现图片的本地保存功能。示例代码展示了从组件的 ref 中获取当前Src，然后调用 savePictureAs 方法进行图片另存为操作，该方法包含了对话框展示、文件写入等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

取dom元素的img路径

vue中使用ref获取

    // 保存到本地
    saveQrCode(item) {
      const currentSrc = this.$refs[item.id][0].children[0].currentSrc;
      savePictureAs(currentSrc, item.ename);
    },

设置方法

/**
 * @description: 图片另存为
 * @param {*currentSrc}  二维码图片路径 -img-src
 * @param { defaultPath} 文件默认保存名
 * @return { status} 是否保存成功
 */
const savePictureAs = (currentSrc, defaultPath = "") => {
  const { dialog } = require("electron").remote;
  const fs = require("fs");
  let base64 = currentSrc.replace(/^data:image\/\w+;base64,/, "");
  let dataBuffer = new Buffer(base64, "base64");
  let dia = dialog.showSaveDialog({
    title: "保存文件",
    defaultPath,
    filters: [{ name: "Custom File Type", extensions: ["png", "jpg"] }],
  });
  //点击取消时
  if (!dia) return;
  fs.writeFile(dia, dataBuffer, function(err) {
    if (err) {
      console.log(err);
    } else {
    }
  });
};

export { savePictureAs };