暑期偷偷造轮子——图像在线转字符画

2018-07-23

近日浏览知乎问题你看过／写过哪些有意思的代码？下，知友清宵绮梦的回答

清宵绮梦
原谅我不会写，只是感觉这个，很有意思。

时，突然对这种字符动画产生了兴趣。

在网上查阅了一番资料后决定自己做(zao)一(lun)个(zi)在线web版的图像转字符画程序。

图片转字符画，GIF动画转GIF字符动画
 java实现图片转字符画

先上轮子

图片转字符画

展示

动态图片

原图

转换后

原图

转换后

静态图片

原图

转换后

原图

转换后

算法

将图片转化为字符画的流程其实非常简单

首先定义一些字符，从大到小排列例如：‘@’，‘#’，‘&’，‘$’，‘%’，‘*’，‘o’，‘!’，‘;’，‘.’，‘ ’。（这里说的从大到小是指真的字符的大小）

将字符平均对应到相应的灰度值（0-255）

以图片数据流（BufferedImage）的方式读取指定的图片

横纵各一层循环，读取每个像素点的RGB并计算灰度值

将灰度值所对应的字符加入到字符列表中

最后将完整的字符列表保存为jpg图片

如果是要转换GIF动态图片的话，还需加上几步

将gif逐帧抽出，一一转换成字符jpg图片

将所有jpg图片拼接成gif

保存gif，删除所有jpg

实现

网上的大佬分享的资料都是用java或者python代码直接实现的，欲搬到前端，我另外还做了一些工作

用户上传文件到服务器。

后端运行算法将用户的图片转换成字符画。

后端返回字符画的地址给前端。

服务器端Tomcat通过地址映射将绝对地址转换为web所支持的相对地址

前端通过AJAX异步显示转换完成的字符画。

Done~~！

总结

字符画的精度直接与原图的分辨率有关，分辨率越高转换出来的字符画就越像。
但阿里云大学生优惠的土豆泥服务器跑不了过大的图片。
emmmmmm

来必力目前使用QQ或微信登录会有bug，建议大家使用微博或其他社交账号登录。

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置：

  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

<br>毕业于南京邮电大学计软网院<br><br>现就读于哈尔滨工业大学计算机学院<br><br>此为博客一枚<br><br><br>用代码<br><br>记录生活的点点滴滴<br>