# 简介
用于研究VR设备中存在的图像畸变和畸变校正算法,可展示畸变矫正算法的效果
# 技术选型
- Electron
- Vue.js
- Node.js
# 一、相关概念和算法
# 1.失真
- 在VR设备中存在的畸变主要是图像畸变中的径向畸变，其他畸变占比不大，故不纳入考虑范围。
- 径向畸变分为枕形畸变和桶形畸变，如图。
# 2.遗传算法
# 3.轮盘选择法
# 4.模拟退火算法
# 二、系统功能(算法效果可视化)
# 1.图像处理
- 根据所给图像和可交互基础参数实时输出畸变图像和畸变对比图(用于研究图像畸变原理)
- 根据所给畸变图像和可交互参数输出矫正过程和反畸变对比图(矫正算法可视化)
# 2.视频处理
- 根据所给视频采样点和可交互参数输出矫正过程和反畸变对比图(矫正算法可视化)
- 根据所给视频和可交互参数输出矫正视频和对比视频(矫正算法可视化)
- 预设功能,方便用户载入上次所调参数数据
# 三、遇到的问题和相关解决方案
# 1.如何实现两张图像的对比图
# 解决方案:
- 利用
canvas自带的Web API--getimagedata()获取图片的像素数据 - 将两张图像的像素数据相减的绝对值添加到原图像素数据的
R通道 - 利用
canvas自带的Web API--putimagedata()将新数据画入canvas - 用
canvas标签将对比图渲染出来
# 2.如何实现读取本地文件(涉及 Electron 跨域)
# 解决方案A (针对于利用 upload 组件上传的文件)
- 根据
upload组件在文件状态改变时会调用on-change钩子，其中函数的默认参数包括文件数据file - 在定义
on-change钩子的函数中通过file获得本地路径file.raw.path和file.raw对象 - 利用
URL.createObjectURL(file.raw)获得图片/视频的URL(Blob对象) - 将获得的
URL赋给img或canvas标签的src
# 解决方案B (针对只有本地路径的文件)
- 利用
Node.js的fs模块中异步读取文件方法fs.readFile读取文件，回调函数中返回data实例 - 利用
new File(data)获得文件流file - 利用
URL.createObjectURL(file)获得图片/视频的URL
# 3.Electron主进程与渲染进程之间的通信
# 渲染进程向主进程发送消息
- 渲染进程引入
ipcRenderer, 利用ipcRenderer.send('message', data)向主进程发送消息 - 主进程引入
ipcMain, 利用ipcMain.on('message', (e, f) => {})监听渲染进程发送消息的事件
# 主进程向渲染进程发送消息
- 主进程利用
mainWindow.webContents.send('message', data)向渲染进程发送消息 - 渲染进程引入
ipcRenderer, 利用ipcRenderer.on('message', data)监听主进程发送消息的事件
# 4.异步同步问题
由于算法运行需要一定的时间, 考虑异步操作会更符合需求
# 5. this 实例指向问题
this 指向当前作用域的实例而不是指向 Vue 实例, 写代码时若要用 this 则需要仔细考虑 this 指向的实例
# 6.如何存储预设数据(下次启动客户端 数据仍存在)
# 解决方案:
- 采用
windows自带的localStorge字典存储 键值一一对应 - localStorage是html5提供的一种本地存储的方法，可以把数据存储在本地浏览器，下次打开后仍然可以获取到存储的数据，如果在存储的数据 量小的时候可以起到代替数据库的功能，比cookies更有优越性。
- localStorage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储
- 可以通过JSON对象提供的parse和stringify进行对象和字符串的转换，进行数据存取
- 加载数据是先判断获取的数据是否为空，万一你可能一不小心清理了一下你的浏览器（狗头.jpg)
// 存储数据
window.localStorage.setItem('name', data)
// 读取数据
window.localStorage.getItem('name')
# 四、待优化(或许会优化吧)
- [ ] 图片加载过慢
img标签读取图片像素数据的方式 或许可以用canvas标签 - [ ] 视频同步卡顿 暂时没有想法
- [ ] 加载中的交互逻辑 可以添加
loading组件
项目地址：毕设——VR反畸变系统设计