项目背景
女朋友喜欢十字绣,一直想着想要有个可以定制十字绣图片的软件或者应用。这件事也被她催了很久,我如果再不行动,一来丢了IT程序猿们的脸,二来她自己都要开始学神马计算机图形学,计算机视觉(明明更应该看看图像处理的好嘛!)。于是我google怒搜“图片像素化”。好吧,本以为这是一件图像处理的事情,结果最后得到了一个js的库,叫seuratjs。这个库本身是基于raphael,js的。把图片的像素的颜色经过分析之后重新在html5的canvas上用svg画了出来。好吧,这样实现的话确实蛮简单的,而且这块我还比较熟,就在饭后急急忙忙用了两个小时把他的demo整合了起来,搞了一个测试界面,并放在了我的github上。
使用说明
具体他自己的API和js代码我就不写出来了,感兴趣的同学可以去把项目clone下来。注意,直接打开html点击图片变化会报错的。错误好像叫"Cross-origin img"?这涉及到jquery跨域的问题。你需要在容器中启动,用http://localhost的路径去访问这个html文件。在windows下的话开启你的IIS 7就可以了。如果没有接触过的话自己去google下方法吧。先要开启IIS服务,然后在IIS里设置你的路径,然后打开浏览器输入http://localhost会得到你设置的目录下的所有文件,就可以一一访问了。
只要点击图片,就会像素化了。
如果你想替换照片,把imgs里的照片换掉就可以了,目前我只简单的设置了一张照片,可以看就行了。
效果图
把效果图放上来瞧瞧。不好意思,侵犯某人的肖像权了(证件照一张!)~各位clone了项目之后可不要把照片外传啊= =!
今后目标
像素化效果如果要定制成可以被十字绣做出来的粒度,还要再定制。目前只是个最简单的demo,等有时间了,需要支持本地上传照片,添加本地或者网上的url链接来替换照片。此外,对于像素化效果的调参会放到界面上,真正做到从界面上调参,更方便做测试。希望把它托管到朋友的服务器上,给更多的人试用试用,来证实一下女朋友十字绣定制的想法靠不靠谱,受欢迎度怎样。