图片查看器窗口/进程

图片查看器窗口

代码定位

TIP

代码定位于 src\main.js 中 createPreviewImgWindow() 函数

逻辑说明

• 加载本地的图片查看器页面 src\modules\page_imgView\index.html，但配置为不显示，在后台隐藏运行。
• 等待主窗口发出图片查看器显示事件，主窗口还会传一个包含图片 URL 的数组对象过来。

涉及到的相关函数，代码、代码文件

事件监听

// 监听 show-imageView 事件，如果渲染进程发出该事件，显示图片查看器窗口。
ipcMain.on("show-imageView", (event, params) => {
  if (imageWindow) {
    imageWindow.webContents.send("showImageView", params);
    imageWindow.show();
  }
});
// 监听 previewImgWin-hide 事件，如果渲染进程发出该事件，隐藏图片查看器窗口
ipcMain.on("previewImgWin-hide", (event, url, type) => {
  imageWindow && imageWindow.close();
  mainWindow.show();
});

图片查看器在点击关闭的时候，会触发 close 事件，会让页面清空图片信息。

imageWindow.on("close", (event) => {
  if (!global.forceQuit) {
    // 告诉页面，我即将退出
    imageWindow.webContents.send("set-imgWin-close-listener", "close");
    setTimeout(() => {
      try {
        imageWindow && imageWindow.hide();
      } catch (error) {
        log.debug("隐藏窗口方法失效");
      }
      mainWindow.show();
    }, 100);
    event.preventDefault();
  }
});

关键部分代码说明

并非所有功能都会写在下面，具体以代码为准

代码文件位于 src\modules\page_imgView\index.html

// 退出图片查看器
close() {
  this.imgLoaded = false;
  this.images = [];
  this.currentImageIndex = 0;
  if (navigator.platform.indexOf("Mac") != -1) {
    // Mac下要先退出全屏
    this.exitFullScreen();

    // 退出全屏不能立即执行窗口退出操作，要等一阵
    setTimeout(() => {
      remote.getCurrentWindow().close();
    }, 200);
  }

  // 初始化图片查看器信息
  this.setDefault();

  // 向主进程发出 previewImgWin-hide 事件，请求隐藏图片查看器
  ipcRenderer.send("previewImgWin-hide");
}
// 全屏
fullScreen() {
  this.isFullscreen = true;
  if (navigator.platform.indexOf("Mac") != -1) {
    remote.getCurrentWindow().setFullScreen(true);
  } else {
    remote.getCurrentWindow().maximize();
  }
}
// 退出全屏
exitFullScreen() {
  this.isFullscreen = false;

  if (navigator.platform.indexOf("Mac") != -1) {
    try {
      remote.getCurrentWindow().setFullScreen(false);
    } catch (error) {
      console.log("退出全屏方法失效");
    }
  } else {
    try {
      remote.getCurrentWindow().unmaximize();
    } catch (error) {
      console.log("退出全屏方法失效");
    }
  }
}

saveAs() {
  let url = this.images[this.currentImageIndex];
  let downloadCallback = this.downloadCallback;

  // 获取 JSESSIONID 和 ROUTE，不加载这个无法进行图片下载
  var JSESSIONID = remote.getGlobal("__JSESSIONID");
  var ROUTE = remote.getGlobal("__ROUTE");
  var regexp = /filename=\"(.*)\"/gi;
  let cookie = "";
  if (ROUTE == "") {
    cookie = "JSESSIONID=" + JSESSIONID;
  } else {
    cookie = "JSESSIONID=" + JSESSIONID + ";" + "route=" + ROUTE + ";";
  }

  // 调用request模块，获取文件名，加载到另存为窗口中
  request
    .head({
      url: url,
      headers: {
        Cookie: cookie,
        "User-Agent-Client": "ucpc",
      },
    })
    .on("response", function (res) {
      var fileName = regexp.exec(res.headers["content-disposition"])[1];
      fileName = decodeURIComponent(fileName);

      // 调用下载模块进行下载
      Download.saveAs({
        url: url,
        name: fileName,
      });
    });
}

WEB端调出图片查看器

代码请见WEB端源码 src\plugins\v-img\index.js，是一个前辈写的插件我看不懂。

主要是下面两行代码

// 将图片信息存入 localStorage
localStorage.setItem("previewImgData",JSON.stringify(previewImgData))
// 调出图片查看器
ZX_CLIENT.previewImg(targetUrl,'update',previewImgData)