轻图像工具－LightImage

LightImage 是我的毕业设计项目，但是至今暂时还是一个残次成品，仍需大力的改善。初衷是开发一款轻量级的图像处理工具，后续又扩展了简易的图像分析和像素画绘制等功能。

项目主要基于 HTML5 中的 Canvas 开发，当提及 Canvas 的时候，常常还会提到 SVG。Canvas 只能通过脚本驱动，适合像素级的图形问题处理；相比较而言 SVG 的驱动方式更加灵活，XML、CSS等都可，所以处理图形是通过元素。对于本项目而言，Canvas 是不二的选择。

项目使用了框架 Vue.js，结合曾经完成的一个数据量较大的应用来看，很优雅，很轻量，很灵活，调试也很棒，不过也遇到一些需要仔细思考的问题，生命周期，路由，页面重载等等。

答辩完后就一直想把一个多月开发过程中的心得和遇到的有意思的问题总结一下，还好之前有在 trello 上记录。下面想从三个部分来说一说～

绘画

关于这个部分，细节的部分集中于事件处理，例如笔迹离开和进入画布需要绑定 mouseleave 和 mouseenter 事件。想要说一说的是，这里添加了我很喜欢的像素画绘制，通过倍率来模拟不同格子数的像素画布，尝试过使用单个像素放大但并适用。在这里不得不提给我带来深刻影响的像素动画作品们 1041uuu。

未来展望：使用栈保存笔画，完成撤销前进；提供自定义像素数量；以及允许添加多张画布组成动画。

图像分析

这个部分也许名不副实？（笑。起初只是想做一个图像的色彩分析，统计色彩的出现频率。依据 rgb 色彩模型，则有256^3种色彩，非常大的数字，于是将相近的色彩归位一类，由大及小最终选定了 6^3 种色彩。使用一个长度为 256 的数组存储出现次数，色彩一一对应下标 0-255，并可反向由下标推导颜色以便在页面渲染。

后来增添了灰度直方图及均衡化的直方图来表现图像的大体特征。这个部分效率受图像大小影响并不明显。

未来展望：可导出分析结果；保持效率得到更精确的结果。

图像处理

做毕设的两个月中，用于学习图像处理和使用 JavaScript 实现花了不少时间。起初大概看了看《数字图像处理》..的目录、基础和色彩相关章节，有了一点点宏观的理解，后期更具体的理解大多来自于他人文章和《数字图像处理原理与实践：基于Visual C++开发》。实现中，比较深刻的是图像剪切，有几个 jQuery 实现的插件，然而还是强迫自己写了一个纯 JavaScript 的，但至今仍不完善，将来如若有一日能够见人，打算让其作为一个独立的组件存在。

图像处理的效率随着图像增大而剧降，很 sad，也是一个改善的重点。

未来展望：结合直方图，添加曲线；可调节亮度，对比度等。

有话说

源码完全在 Github

可以在 heroku 上 Try it