【Electron × Vue3】画像をリサイズして任意の場所に保存するツールを作る

<script setup lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref } from 'vue'

・・・

declare global {
  interface File {
    path: string
  }
}

・・・

/**
 * オリジナル画像データ
 */
const originalImage = reactive({
  name: '',
  extention: '',
  path: '',
  ratio: 0,
  element: null,
})

/**
 * リサイズ画像情報
 */
const resizeImageSrc = ref('')
const resizeImageWidth = ref(0)
const resizeImageHeight = ref(0)

/**
 * ファイルドロップ処理
 */
const onDropFile = (event: DragEvent) => {
  if (!event?.dataTransfer) {
    return
  }
  if (event.dataTransfer.files.length === 0) {
    return
  }
  const file = event.dataTransfer.files[0]
  onSetPreviewImage(file)
}

/**
 * プレビュー画像の設定
 */
const onSetPreviewImage = (file: File) => {
  // 画像情報設定
  originalImage.name = file.name
  originalImage.extention = file.name.split('.').pop()
  originalImage.path = file.path
  originalImage.element = null

  resizeImageSrc.value = URL.createObjectURL(file)

  // gifはリサイズできないためメッセージを表示
  message.value = ''
  if (originalImage.extention == 'gif') {
    message.value = 'gif形式のファイルはリサイズに対応していません'
  }

  // 画像読み込んで幅を設定
  const reader = new FileReader()
  reader.onloadend = () => {
    if (!reader.result || !(typeof reader.result == 'string')) {
      return
    }
    let loadImage = new Image()
    loadImage.src = reader.result
    loadImage.onload = () => {
      resizeImageHeight.value = loadImage.naturalHeight
      resizeImageWidth.value = loadImage.naturalWidth
      // 横のサイズをベースに比率を計算
      originalImage.ratio = resizeImageWidth.value / resizeImageHeight.value
      originalImage.element = loadImage
    }
  }
  reader.readAsDataURL(file)
}

・・・略・・・

</script>

<template>
  <div class="container">
    <div class="container-item image-area" @dragover.prevent @drop.prevent="onDropFile">
      <img v-if:="resizeImageSrc" class="image-item" :src="resizeImageSrc" />
      <div v-if:="!resizeImageSrc" class="image-drop-box">画像をドラッグ＆ドロップしてください。</div>
    </div>
    <label class="container-item image-name-area">{{ originalImage.name }}</label>
・・・略・・・
  </div>
</template>

<script setup lang="ts">

・・・略・・・

/**
 * 画像最大サイズ
 */
const IMAGE_SIZE_MAX_VALUE = 1200

/**
 * 画像サイズ変更処理
 */
const onChangeWidthValue = (e: any) => {
  if (!originalImage.element) {
    resizeImageWidth.value = 0
    return
  }
  let inputValue = e.target.value
  if (inputValue >= IMAGE_SIZE_MAX_VALUE) {
    inputValue = IMAGE_SIZE_MAX_VALUE
  }
  resizeImageWidth.value = inputValue
  if (isKeepRatio.value) {
    resizeImageHeight.value = resizeImageWidth.value / originalImage.ratio
  }
  const base64 = onGetResizeImageBase64(originalImage.element, resizeImageWidth.value, resizeImageHeight.value)
  resizeImageSrc.value = base64
}
const onChangeHeightValue = (e: any) => {
  if (!originalImage.element) {
    resizeImageHeight.value = 0
    return
  }
  let inputValue = e.target.value
  if (inputValue >= IMAGE_SIZE_MAX_VALUE) {
    inputValue = IMAGE_SIZE_MAX_VALUE
  }
  resizeImageHeight.value = inputValue
  if (isKeepRatio.value) {
    resizeImageWidth.value = resizeImageHeight.value * originalImage.ratio
  }
  const base64 = onGetResizeImageBase64(originalImage.element, resizeImageWidth.value, resizeImageHeight.value)
  resizeImageSrc.value = base64
}

/**
 * リサイズしたbase64データを取得
 * https://qiita.com/komakomako/items/8efd4184f6d7cf1363f2
 */
const onGetResizeImageBase64 = (image: HTMLImageElement, width: number, height: number) => {
  const canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height
  const context = canvas.getContext('2d')
  if (!context) {
    return ''
  }
  context.drawImage(image, 0, 0, width, height)
  const base64 = canvas.toDataURL('image/png')
  return base64
}

・・・略・・・

</script>

<template>
  <div class="container">

・・・略・・・

    <div class="container-item size-info-area">
      <input
        @input="onChangeWidthValue"
        class="size-input-value-item"
        type="number"
        min="0"
        maxlength="1200"
        placeholder="width"
        v-model.number="resizeImageWidth"
        :disabled="originalImage.extention == 'gif'"
      />
      <span class="size-input-value-px">px</span>
      <div class="size-input-value-between">x</div>
      <input
        @input="onChangeHeightValue"
        class="size-input-value-item"
        type="number"
        min="0"
        maxlength="1200"
        placeholder="height"
        v-model.number="resizeImageHeight"
        :disabled="originalImage.extention == 'gif'"
      />
      <span class="size-input-value-px">px</span>
      <div class="size-input-keep-ratio-area">
        <input @input="onChangeIsKeepRatio" class="size-input-keep-ratio-check" type="checkbox" v-model="isKeepRatio" />
        <label>縦横比<br />固定</label>
      </div>
    </div>

・・・略・・・

  </div>
</template>

<script setup lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref } from 'vue'
import { useElectronApi } from '../api/electron-api'

const electronApi = useElectronApi()

・・・略・・・

/**
 * リサイズした画像ファイルを保存
 */
const onSaveFile = () => {
  if (!originalImage.element) {
    message.value = '画像を読み込んでいません'
    return
  }
  if (!outputPath.value) {
    message.value = '出力フォルダが定義されていません'
    return
  }

  message.value = ''
  let outputDirPath: string = outputPath.value
  if (outputDirPath.endsWith('/')) {
    outputDirPath = outputDirPath.slice(0, -1)
  }
  if (originalImage.extention == 'gif') {
    // gifはリサイズできないのでファイルコピー
    const fromPath = originalImage.path
    const fileName = originalImage.name.split('.')[0] + '.gif'
    const toPath = outputDirPath + '/' + fileName
    electronApi.copyFile(fromPath, toPath, (result) => (message.value = result))
  } else {
    // それ以外はpng形式でリサイズして保存
    const fileName = originalImage.name.split('.')[0] + '.png'
    const data = onGetResizeImageBase64(originalImage.element, resizeImageWidth.value, resizeImageHeight.value)
    electronApi.savePngFile(outputDirPath, fileName, data, (result) => (message.value = result))
  }
}

・・・略・・・

</script>

<template>
  <div class="container">

・・・略・・・

    <div class="container-item output-file-area">
      <input
        @input="onChangeOutputPath"
        class="output-file-value"
        type="text"
        placeholder="出力フォルダ"
        v-model="outputPath"
      />
      <button class="output-file-button" v-on:click="onSaveFile">出力</button>
    </div>

・・・略・・・

  </div>
</template>

・・・

// ----- レンダラープロセスから呼び出される処理 -----

/** ファイル保存関連 */
const fs = require('fs')

・・・略・・・

/**
 * pngファイル保存処理
 */
ipcMain.handle('savePngFile', async (event, fileDir: string, fileName: string, data: string) => {
  try {
    fs.statSync(fileDir)
  } catch (e) {
    return `フォルダが存在しません => ${fileDir}`
  }

  const base64Data = data.replace(/^data:image\/png;base64,/, '')
  const outputFilePath = path.join(fileDir, fileName)
  try {
    fs.writeFileSync(outputFilePath, base64Data, 'base64')
  } catch (e) {
    return `ファイルの保存に失敗しました => ${outputFilePath}`
  }
  return `ファイルを保存しました => ${outputFilePath}`
})

/**
 * ファイルコピー処理 (gifファイル用)
 */
ipcMain.handle('copyFile', async (event, fromPath: string, toPath: string) => {
  try {
    fs.statSync(fromPath)
  } catch (e) {
    return `ファイルが存在しません => ${fromPath}`
  }

  try {
    fs.copyFileSync(fromPath, toPath)
  } catch (e) {
    console.log(e)
    return `ファイルの保存に失敗しました => ${toPath}`
  }
  return `ファイルを保存しました => ${toPath}`
})

・・・略・・・

const { ipcRenderer, contextBridge } = require('electron')

// レンダラープロセス -> メインプロセス 処理を呼び出すためのブリッジ
// コンテキストを分離してwindowオブジェクトに設定する
// https://www.electronjs.org/ja/docs/latest/tutorial/context-isolation
contextBridge.exposeInMainWorld('electronAPI', {

・・・略・・・

  savePngFile: (fileDir: string, fileName: string, data: string) =>
    ipcRenderer.invoke('savePngFile', fileDir, fileName, data),
  copyFile: (fromPath: string, toPath: string) => ipcRenderer.invoke('copyFile', fromPath, toPath),

・・・略・・・

})

/**
 * Electronメインプロセス側に定義した処理
 * windowオブジェクトに設定しているため、型定義を拡張する必要がある
 */
export interface IElectronAPI {

・・・略・・・

  savePngFile: (fileDir: string, fileName: string, data: string) => Promise<string>
  copyFile: (fromPath: string, toPath: string) => Promise<string>

・・・略・・・

}
declare global {
  interface Window {
    electronAPI: IElectronAPI
  }
}

/**
 * Electron API
 * Composition Function
 * @returns
 */
export const useElectronApi = () => {

・・・略・・・

  const savePngFile = (fileDir: string, fileName: string, data: string, callback: (result: string) => void) => {
    if (!window.electronAPI) {
      callback('current platform is not support electron api.')
      return
    }
    window.electronAPI.savePngFile(fileDir, fileName, data).then(callback)
  }

  const copyFile = (fromPath: string, toPath: string, callback: (result: string) => void) => {
    if (!window.electronAPI) {
      callback('current platform is not support electron api.')
      return
    }
    window.electronAPI.copyFile(fromPath, toPath).then(callback)
  }

・・・略・・・

  return {

・・・略・・・

    savePngFile,
    copyFile,

・・・略・・・

  }
}

# electron-storeのインストール
npm install electron-store

import { app, BrowserWindow, ipcMain, screen } from 'electron'
import * as path from 'path'

// 保存データ
const Store = require('electron-store')
const store = new Store()

const StoreDataKey = {
  WindowPosition: 'WindowPosition',
  WindowSize: 'WindowSize',
}

const DefaultWindowSize = {
  width: 800,
  height: 600,
}

function createWindow() {
  const windowSize = store.get(StoreDataKey.WindowSize) || [DefaultWindowSize.width, DefaultWindowSize.height]
  const windowPosition = store.get(StoreDataKey.WindowPosition) || getCenterPosition()

  const mainWindow = new BrowserWindow({
    width: windowSize[0],
    height: windowSize[1],
    x: windowPosition[0],
    y: windowPosition[1],
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  })

  mainWindow.loadFile(path.join(__dirname, '../index.html'))

  mainWindow.on('close', () => {
    // ウィンドウ情報を保存
    store.set(StoreDataKey.WindowPosition, mainWindow.getPosition())
    store.set(StoreDataKey.WindowSize, mainWindow.getSize())
  })

  // Open the DevTools.
  // mainWindow.webContents.openDevTools();
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

/**
 * ウィンドウの中央の座標を返却
 *
 * @return {array}
 */
function getCenterPosition() {
  const { width, height } = screen.getPrimaryDisplay().workAreaSize
  const x = Math.floor((width - DefaultWindowSize.width) / 2)
  const y = Math.floor((height - DefaultWindowSize.height) / 2)
  return [x, y]
}

・・・略・・・

・・・略・・・

// ----- レンダラープロセスから呼び出される処理 -----

・・・略・・・

/** データ保存関連 */
ipcMain.handle('saveStoreData', async (event, key: string, value: any) => {
  store.set(key, value)
})

ipcMain.handle('loadStoreData', async (event, key: string) => {
  return store.get(key)
})

ipcMain.handle('clearStoreData', async (event) => {
  store.clear()
})

const { ipcRenderer, contextBridge } = require('electron')

// レンダラープロセス -> メインプロセス 処理を呼び出すためのブリッジ
// コンテキストを分離してwindowオブジェクトに設定する
// https://www.electronjs.org/ja/docs/latest/tutorial/context-isolation
contextBridge.exposeInMainWorld('electronAPI', {

・・・略・・・

  saveStoreData: (key: string, value: any) => ipcRenderer.invoke('saveStoreData', key, value),
  loadStoreData: (key: string) => ipcRenderer.invoke('loadStoreData', key),
  clearStoreData: () => ipcRenderer.invoke('clearStoreData'),
})

/**
 * Electronメインプロセス側に定義した処理
 * windowオブジェクトに設定しているため、型定義を拡張する必要がある
 */
export interface IElectronAPI {

・・・略・・・

  saveStoreData: (key: string, value: any) => Promise<void>
  loadStoreData: (key: string) => Promise<any>
  clearStoreData: () => Promise<void>
}
declare global {
  interface Window {
    electronAPI: IElectronAPI
  }
}

/**
 * Electron API
 * Composition Function
 * @returns
 */
export const useElectronApi = () => {

・・・略・・・


  const saveStoreData = (key: string, value: any) => {
    window.electronAPI?.saveStoreData(key, value)
  }

  const loadStoreData = (key: string, callback: (result: any) => void): any => {
    if (!window.electronAPI) {
      callback(null)
      return
    }
    window.electronAPI.loadStoreData(key).then(callback)
  }

  const clearStoreData = () => {
    window.electronAPI?.clearStoreData()
  }

  return {

・・・略・・・

    saveStoreData,
    loadStoreData,
    clearStoreData,
  }
}

<script setup lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref } from 'vue'

・・・略・・・

onMounted(() => {
  loadAllStoreData()
})

/**
 * 保存データキー
 */
const StoreDataKey = {
  IsKeepRatio: 'IsKeepRatio',
  OutputPath: 'OutputPath',
}

/**
 * 保存データロード処理
 */
const loadAllStoreData = () => {
  // 保存されているデータがあれば設定する
  electronApi.loadStoreData(StoreDataKey.IsKeepRatio, (storeData) => {
    if (storeData != undefined) {
      isKeepRatio.value = storeData
    }
  })
  electronApi.loadStoreData(StoreDataKey.OutputPath, (storeData) => {
    if (storeData != undefined) {
      outputPath.value = storeData
    }
  })
}

・・・略・・・

/**
 * 画像の縦横比固定するか？
 */
const isKeepRatio = ref(true)
const onChangeIsKeepRatio = (e: any) => {
  let inputValue = e.target.checked
  electronApi.saveStoreData(StoreDataKey.IsKeepRatio, inputValue)
}

/**
 * 出力パス
 */
const outputPath = ref('')
const onChangeOutputPath = (e: any) => {
  let inputValue = e.target.value
  electronApi.saveStoreData(StoreDataKey.OutputPath, inputValue)
}

・・・略・・・

</script>

・・・略・・・