先给自己叠个甲
- 这是一个很小的东西,主要是分享我们的设计思路和实现路径,相信 v2 的各位都能很快做出来
- 这是几年前我们用爱发电做的东西,开发是我的朋友,我是产品和设计。
- 可以喷我,但是希望对技术有指点的话可以客气一点。我不希望我的朋友因此受到攻击。
起因
我有一个做人力财务类的朋友,她的日常工作有一个部分需要收集某些职员的身份证复印件来作为资料使用,但是这些被收集人经常不在单位,或者科技产品素质低一点,很难有方法临时去快速扫描或者打印,以至于大家会把身份证照片发给她,然后她用 ps 或者别的东西产出一个,但是拍的照片又因为透视不是都那么好处理。 所以我想有没有什么办法能帮她快速解决这个东西。
需求分析
- 市面上其实有很多工具可以实现,比如某些小程序。甚至是 ppt 、axure 、ps 等。但是我希望这种高频的场景应该有一个优化过的专门的 ui
- 这个场景实分小,但是很垂直,频率也很高,结合她的办公场景( pc ),以及资料的特殊性,我希望这是一个不用向服务器上传资源的东西。
方案与实现
所以最后用这个方案来实现-一个纯前端的 web 生成工具。 这个工具是直接存在 oss 上的,我的免费容量完全能支撑她的访问频率,而且不会有泄密风险。 最后是做的一些附加功能,比如复印件水印、支持多种格式导出。 在使用习惯后,可以在一分钟内获得一张身份证复印件。我当时也打算做一些其他的小工具,解决朋友们的问题,所以搞了这个“60 秒”的 logo ,希望我们产出的所有工具都可以在一分钟内解决用户的小需求。
http://cdn.blog.gt1920.com/idcard/index.html
一些小遗憾
为了清晰度更高,照片的初次裁切是用阿里的组件实现的,但是效果差了一点,用起来不是很方便。而且因为我的要求是纯前端,能放在 oss 上直接用,当时很多市面上的库都没法引,在裁剪图形过程的体验没有达到我预想的最好情况。不知道有没有前端直接处理文件,而不是在页面上画图的方法或者其他更好的方法实现这个过程。