refactor: 更多的图片信息

src/main/ipc.ts

@@ -39,9 +39,9 @@ export async function sendNewTextMessageToMainWindow(from: number, to: number, t
   mainWindow.webContents.send('new-text-message', from, to, textMsg)
 }
 
-export async function sendNewImageMessageToMainWindow(from: number, to: number, mime: string, image: Uint8Array) {
+export async function sendNewImageMessageToMainWindow(from: number, to: number, name: string, size: number, image: Uint8Array, mime: string, width: number, height: number) {
   const mainWindow = await mainWindowPromise
-  mainWindow.webContents.send('new-image-message', from, to, mime, image)
+  mainWindow.webContents.send('new-image-message', from, to, name, size, image, mime, width, height)
 }
 
 export async function sendNewFileMessageToMainWindow(from: number, to: number, name: string, size: number) {

src/main/message/router.ts

@@ -56,11 +56,21 @@ router.post('/message/image', async (ctx) => {
     ctx.status = 400
     return
   }
+  if (!image.originalFilename) {
+    ctx.status = 400
+    return
+  }
   const mime = image.mimetype
   if (!mime) {
     ctx.status = 400
     return
   }
+  const width = Number(ctx.request.body?.width)
+  const height = Number(ctx.request.body?.height)
+  if (!(width > 0 && height > 0)) {
+    ctx.status = 400
+    return
+  }
   // 保存图片到数据目录
   const ext = mime.split('/')[1]
   const imageDir = `./data/${to}/images`
@@ -69,7 +79,7 @@ router.post('/message/image', async (ctx) => {
   await fse.rename(image.filepath, imagePath)
   // 发送图片信息到渲染进程
   const imageData = await fse.readFile(imagePath)
-  await sendNewImageMessageToMainWindow(from, to, mime, imageData)
+  await sendNewImageMessageToMainWindow(from, to, image.originalFilename, image.size, imageData, mime, width, height)
   // 响应
   ctx.status = 200
 })

src/main/preload.ts

@@ -15,9 +15,9 @@ contextBridge.exposeInMainWorld('electron', {
       handler(from, to, textMsg)
     })
   },
-  async setNewImageMessageHandler(handler: (from: number, to: number, mime: string, image: Uint8Array) => void) {
-    ipcRenderer.on('new-image-message', (event, from, to, mime, image) => {
-      handler(from, to, mime, image)
+  async setNewImageMessageHandler(handler: (from: number, to: number, name: string, size: number, image: Uint8Array, mime: string, width: number, height: number) => void) {
+    ipcRenderer.on('new-image-message', (event, from, to, name, size, image, mime, width, height) => {
+      handler(from, to, name, size, image, mime, width, height)
     })
   },
   async setNewFileMessageHandler(handler: (from: number, to: number, name: string, size: number) => void) {

src/renderer/api/message.ts

@@ -10,9 +10,18 @@ export async function postTextMsg(hostAndPort: string, from: number, to: number,
   })
 }
 
-export async function postImageMsg(hostAndPort: string, from: number, to: number, image: File) {
+export async function postImageMsg(
+  hostAndPort: string,
+  from: number,
+  to: number,
+  image: File,
+  width: number,
+  height: number,
+) {
   const formData = new FormData()
   formData.set('image', image)
+  formData.set('width', width.toString())
+  formData.set('height', height.toString())
   return await fetch(`http://${hostAndPort}/message/image`, {
     method: 'POST',
     headers: {

src/renderer/components/chatroom.vue

@@ -52,6 +52,17 @@ function getFriendClient() {
   return friendOnlineClients.value[friendUid]
 }
 
+async function getImageInfo(image: File) {
+  const imgEl = new Image()
+  imgEl.src = URL.createObjectURL(image)
+  return new Promise<{ width: number; height: number }>((resolve) => {
+    imgEl.onload = () => {
+      resolve({ width: imgEl.width, height: imgEl.height })
+      imgEl.src = ''
+    }
+  })
+}
+
 async function sendText() {
   // 检查
   if (!text.value)
@@ -101,13 +112,14 @@ async function sendImage(event: Event) {
   if (!files || files.length < 1)
     throw new Error('无法获取图片')
   const image = files[0]
+  const { width, height } = await getImageInfo(image)
   // 尝试发送消息
   const hostAndPort = getHostAndPort(client)
   if (!hostAndPort) {
     ElMessage({ message: '无法进行 P2P 通信', type: 'warning', duration: 1500 })
     return
   }
-  const res = await postImageMsg(hostAndPort, uid.value, client.uid, image)
+  const res = await postImageMsg(hostAndPort, uid.value, client.uid, image, width, height)
   if (!res.ok)
     throw new Error(`发送图片消息失败，响应状态：${res.status}`)
   // 发送成功后
@@ -116,6 +128,10 @@ async function sendImage(event: Event) {
     from: uid.value,
     to: client.uid,
     mime: image.type,
+    width,
+    height,
+    name: image.name,
+    size: image.size,
     data: new Uint8Array(await image.arrayBuffer()),
   })
   imageInput.value.value = ''

src/renderer/components/message.vue

@@ -40,7 +40,10 @@ function friendlySize(byteCount: number) {
         {{ message.data }}
       </div>
       <div v-if="message.type === 'image'" max-w-72>
-        <img :src="createImageUrl(message.mime, message.data)" alt="image">
+        <img
+          :src="createImageUrl(message.mime, message.data)"
+          :alt="message.name" :width="message.width" :height="message.height"
+        >
       </div>
       <div v-if="message.type === 'file'" max-w-96 space-y-2>
         <div flex space-x-2>

src/renderer/stores/chat.ts

@@ -35,8 +35,8 @@ export const useChatStore = defineStore('chat', () => {
   window.electron.setNewTextMessageHandler((from, to, textMsg) => {
     addNewMessage({ type: 'text', from, to, data: textMsg })
   })
-  window.electron.setNewImageMessageHandler((from, to, mime, image) => {
-    addNewMessage({ type: 'image', from, to, mime, data: image })
+  window.electron.setNewImageMessageHandler((from, to, name, size, image, mime, width, height) => {
+    addNewMessage({ type: 'image', from, to, name, size, data: image, mime, width, height })
   })
   window.electron.setNewFileMessageHandler((from, to, name, size) => {
     addNewMessage({ type: 'file', from, to, name, size })

src/renderer/typings/app.ts

@@ -78,6 +78,10 @@ export interface ImageMessage {
   from: number
   to: number
   mime: string
+  width: number
+  height: number
+  name: string
+  size: number
   data: Uint8Array
 }
 

src/renderer/typings/electron.d.ts

@@ -8,7 +8,7 @@ export default interface ElectronApi {
   getNetworkInterfaces: () => Promise<NetworkInterface[]>,
   getMessageServerPort: () => Promise<number>,
   setNewTextMessageHandler: (handler: (from: number, to: number, textMsg: string) => void) => Promise<void>,
-  setNewImageMessageHandler: (handler: (from: number, to: number, mime: string, image: Uint8Array) => void) => Promise<void>,
+  setNewImageMessageHandler: (handler: (from: number, to: number, name: string, size: number, image: Uint8Array, mime: string, width: number, height: number) => void) => Promise<void>,
   setNewFileMessageHandler: (handler: (from: number, to: number, name: string, size: number) => void) => Promise<void>,
 }