资讯专栏INFORMATION COLUMN

图片转字符

shiguibiao / 3064人阅读

摘要:处理图片我比较熟悉,刚好有库可以处理图片,简直不要太合适对图片的处理也比较简单,读取图片,灰度处理,获取每个像素点的灰度值,将灰度值的深浅转换为字符。

引言

前几天看到一幅用字符(准确的说是ascii码)绘制的doge图像,觉得挺有意思

</>复制代码

  1. * @Date
  2. * @Desc
  3. */

将他放到代码的注释部分,加上了Doge bless you! No bug!的字样,放在了代码的注释部分(新建脚本的时候自动添加),同事看到了觉得挺有意思,问我怎么搞得。
后来我仔细看了下这幅图,分析了下,都是用ascii字符绘制的,通过ascii字符的占用像素多少表现图片的深浅,想通了原理决定自己实现一个图片转字符的工具。

处理图片

我比较熟悉php,刚好php有GD库可以处理图片,简直不要太合适~

对图片的处理也比较简单,读取图片,灰度处理,获取每个像素点的灰度值,将灰度值的深浅转换为ascii字符。

都去图片之前,首先要做的就是统一接口,实现读取多重类型的图片,php的GD库中,没有直接提供相关的函数,造个小轮子:

</>复制代码

  1. class ImageCreate
  2. {
  3. // 要处理的目标,可能是文件
  4. protected $target = "";
  5. // 文件的类型
  6. protected $type = 0;
  7. protected $supportTypes = [
  8. 1 => "imagecreatefromgif", // gif
  9. 2 => "imagecreatefromjpeg", // jpg
  10. 3 => "imagecreatefrompng", // png
  11. 6 => "imagecreatefrombmp", // bmp
  12. ];
  13. public function __construct($target, $type = 0)
  14. {
  15. $this->target = $target;
  16. $this->type = $type;
  17. }
  18. public function create()
  19. {
  20. $type = $this->getType();
  21. if (!isset($this->supportTypes[$type])) {
  22. throw Exception("Type of image not support. Abstract[type[{$this->type}]]");
  23. }
  24. $func = $this->supportTypes[$type];
  25. if (method_exists($this, $func)) {
  26. $ret = $this->$func();
  27. } else {
  28. $ret = $func($this->target);
  29. }
  30. return $ret;
  31. }
  32. protected function getType()
  33. {
  34. if (!$this->type) {
  35. $this->type = exif_imagetype($this->target);
  36. }
  37. return $this->type;
  38. }
  39. }

使用时候不用关心图片类型,类库内部帮你做了处理,(new ImageCreate($image))->create()就获取到了图片resource句柄,供下一步使用。

php读取像素点信息用下面的公式,其中$x,$y分别表示像素点的位置。

</>复制代码

  1. $rgb = imagecolorat($this->resourceImage, $x, $y);
  2. $r = ($rgb >> 16) & 0xFF;
  3. $g = ($rgb >> 8) & 0xFF;
  4. $b = $rgb & 0xFF;

像素灰度化,关于灰度化可以参考百度百科的解释

</>复制代码

  1. 灰度化,在RGB模型中,如果R=G=B时,则彩色表示一种灰度颜色,其中R=G=B的值叫灰度值,因此,灰度图像每个像素只需一个字节存放灰度值(又称强度值、亮度值),灰度范围为0-255。一般有以下四种方法对彩色图像进行灰度化。

  2. 一般有以下四种方法对彩色图像进行灰度化处理:分量法 最大值法平均值法加权平均法

这里使用了加权平均法

</>复制代码

  1. 根据重要性及其它指标,将三个分量以不同的权值进行加权平均。由于人眼对绿色的敏感最高,对蓝色敏感最低,因此,按下式对RGB三分量进行加权平均能得到较合理的灰度图像。

  2. 处理公式 intval($r 0.228 + $g 0.587 + $b * 0.114)

更详细的内容这里就不讨论了,有兴趣的可以自行查阅资料,这里主要使用了加权平均法求灰度值

这里插叙下,当我完成开发后,发现,稍微大点的图片,输出信息很容易就换行了,看起来一团糟,这里还要做一个比例缩放的功能,沿着宽高方向做不同的缩放,将多个像素点合并为1个,合并的时候简单的取加权平均值。

</>复制代码

  1. gray = (gray0 + gray1 + ... + grayn)/n;
使用

这里开发已经基本完成,已经放到github,发布到composer,想看看效果的只需要通过composer命令composer require aizuyan/img2ascii安装就可。

安装完成之后,会有vendor/bin/img2ascii可执行文件,向下面这样执行他就可以了,第一个命令是要处理的图片,-x是宽度方向像素缩小比例,-y是高度方向缩小比例(由于编辑器中ascii字符显示的时候一般高度是宽度的两倍,所以缩放的时候刚好反过来)

</>复制代码

  1. ➜ bin img2ascii ~/Desktop/abm.jpg -x 10 -y 20
  2. ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  3. ::::::::::::::::::::::::::::::rrii: s:::::::::::::::::::::::
  4. :::::::::::::::::::::::::::iisMN8B99r:::::::::::::::::::::::
  5. :::::::::::::::::::::::::: iq0B8M0000r::::::::::::::::::::::
  6. ::::::::::::::::::::::::: @B8B09BB0@0B :::::::::::::::::::::
  7. :::::::::::::::::::::::::r@BBNB08880B0v:::::::::::::::::::::
  8. :::::::::::::::::::::::ir000B8NB888@B@Noi:::::::::::::::::::
  9. ::::::::::::::::::::::i00000BB8@B@@808BBsni:::::::::::::::::
  10. :::::::::::::::::::::: 0B@B00no7vr7ii7rntipi::::::::::::::::
  11. ::::::::::::::::::::::tBB9mmoi;i i ii:;7s :i::::::::::::::::
  12. :::::::::::::::::::::i000Nnsirvir i isi::::::::::::::::::
  13. :::::::::::::::::::::i0B0nmmtii i rir:ip7::::::::::::::::::
  14. ::::::::::::::::::::7in8npstrpsrqpiisqtorr :::::::::::::::::
  15. ::::::::::::::::::::vvp9mtvppoqirs ;i7ovivi:::::::::::::::::
  16. :::::::::::::::::::: orq0ttr irr7;ii :rvi:::::::::::::::::
  17. :::::::::::::::::::::ivr9tmi;i7oitr iitqvi::::::::::::::::::
  18. :::::::::::::::::::::: imnpsrt7soprri7isqr::::::::::::::::::
  19. ::::::::::::::::::::::: n9tsisqi :i :rvr7:::::::::::::::::::
  20. ::::::::::::::::::::::: qq9tr7iompvvoi7i::::::::::::::::::::
  21. :::::::::::::::::::::::ioipmmqpiiiiri ::::::::::::::::::::::
  22. ::::::::::::::::::::i rrvrirsrnr7viir7ii::::::::::::::::::::
  23. ::::::::::: , ,. iv: ;riiiviirorrtrviirii ,,, :::::::::::::
  24. ::::::::::ii. iiii7iiiriri77r7ivri;i;:., . .r:::::::::::
  25. ::::::iri vv . .. :rr7;i :iiii:iiiviirir, . ..v;: i ::::::
  26. :::i:iv;:rr . ... i i rr::;i r:r riiii: ... . :rr; i;: :::
  27. :: v7v :::r. .. . :riiiiviiiiii:::iii. . . . r:ir:i ri::
  28. ::smtqiirr :. .......,iii;r; iiriii: . .. :iriv;irii::
  29. :rmppir r;ri., ... .. . , , , . .. . . ,,7i;ir irr :
  30. :instiv: r . i :, , ,, . . . .... , .rrvi:i vr:
  31. :smNniv isp rq77i :::,,: :,::,,,, iipsr .viv;ii r7;:

下面是几张转换先后图片的效果。

</>复制代码

  1. n00nnNM8@8M99@B8088B8B0NsnMMMmm00@8B8B@BB0M9MmmmN080Nn9MB00@@B08noonmmm
  2. 9snM90NM@B900089B08B@B8rtnn0NMnm99M9nN0N0NN0nNmmN@0B8N990@000sqtssooots
  3. M8B9n889M@80M08npm0NMmttiiii:ii : , :i i i7mM08MM09MnpstpsspoqqnN
  4. m00NN0pmnM0pttonmq7 : . .... . , ,,, :i iss90morttqoom9N9nr
  5. tmnnsN7qoNBMmovi , . . . . ... , i:: ::: :: ,, :iirpopnMBN9Mnnnn
  6. ms99p7iqNNnqr: . . ..... . . . ..... iir iiiii:i::: ,, ir7mmnrnnmmMM
  7. 9M000mmmnq: . .... . . ... .. , :smvii;iirrrviiiii :irrirm8B
  8. 0BB00@Bmr ....... .. . . . . . , :i7s:v7i7rrivri77ri;i , ,, iip
  9. 8B00B08s . . . . ... . . ,,,:ir7iivqpqqor7ivv7ir : ::::i
  10. B8B8B0s . .. ... .. . . ... , ,,,: iiotistpttsrrqssii::i i i
  11. 0BBBBo ., .... . .... . , , , , i oooorstnsoprosoviivir7 :rv
  12. 8@8Mi,. .. .. . . , , , , , : iqsrtnqotppsmsoporpttrpqtq
  13. MMm ..,. ... .. . . , , , , ii imnmnnmrrsmnnmmmmmmmmmmrnB
  14. Mmr .., ..... ,,, ,, ,, .... iii7n9nmtnrnmnnm9M9909MNm90BB
  15. mp:. ., .. ,, ,, , , : ,, , ,:ivtMM9nnnmnnm00000N09099888@
  16. 0p,. . , :,, , ,, , i i:::: :: :: ivtM00NNnmMM90N9N0N9NMB@B@00
  17. Ns . , :: isri , , : rr7irriivi:irri iroM0MN9N0NN9000009N98@8@0B@
  18. 0mi :iii:ivr:, .. .. ivvi::istos7iri irq0088008088NMMMM9M8@80880@
  19. MNpi:iri:i:: .. . . iii i i::: iis0000090@000M0nN08B0B0@808
  20. 09MN7: ;7 ,,. . ,,: :: ::: ::: rqn@B@80NN90nttq000B800080B
  21. N0M0M7rri:..: i:ivir ,,,, ,,,::: ,, : :: irtnM8009ti7iiis0B8B@8BB0@B
  22. NN0MN99mm: :nmnssnnnrr: , ,, :,, , :::i iivivi:;iririsNB@008B0BB
  23. NMN0mmrtp i@B@8BB9Npr: , , , ::::: ii i :rr iiirr0nn@@B0@0M
  24. 9mmmpt7i: . p80B@Nnqi: ,,,,,: :::::::::ii ii ii:i; iiiirsmm00nmMMm0
  25. 09mmmnti , oN0@Nmsii: ::::, : ::::ii ii i i :iiiiririrtmmnnnnssnN
  26. N9N0Mrqq:, rpmpopoi :: ::::::::: : :iiiiiii ::ir:ri irvv7tnnn09oq7i
  27. 0NMNn99rr :riqssrpsrr :: ::::: : iii ii r iir :;iri:iv7ipn99opsi
  28. B@Mm9990mi:iiiiriiviii;ii iii:ii: irri r ir rr: :riri:ri: :iiiiioiii7
  29. qssptrn9nnnnosir: iiiiii:: :ri rii r: ii: riii ii ir:iiirvvrirvi:;
  30. : r; :i: ri r: i rii :r : iir ri :;iriri ii i rrr ;;: :riii
  31. rvriivri7rviviviiiiiv; ir:i: :: :ir :rr i ii i ii:i;; ;i:;i
  32. i;ii7iiiriiiviiiiii7ii ii : rir i iiiiii ii i ii iiiii r r:iv:i
  33. iviiiiiiirrviiii t v;rr : i i i iiii iii i i iiir:;;iir

再来张美女图片(不知道有没有侵权,侵权删)

</>复制代码

  1. : iiii:iiiiiqsmM9M@9qtossrntNMmnnM900B@BBB0@8BB@0@BMprpontpp
  2. :i r :iirrrm0@8NMBnttptponm0Mnmmnn@B880@@888BB8BBB8nsqorpor
  3. :ri:i r:iiiisqnmno9mopsqsqonnnnnnmN8088808B8B@B080B8svi7tsqs
  4. iii ii ir:;7tmnMMmMmotr7rvrmM0B88Mn9B8B@88@8@B@8B@B8tppsnnmr
  5. i iii:rirqspmrrmntqppptoNnM9ioqnN08B0888BBB08B0MNsiiiirr7
  6. ::::::i i:isnMM0n9nstipM0BMri , , rNB000B88@080B@ppsrorqo
  7. ::: ::: iii ittqrtnnstpBB8ni, ... ,, i9880800080nmmiriivrii
  8. : i :vnn00mMnptM808i , .. ,: t9NMB0000BB80prvrv7sv
  9. , ,, ,:i i irqsotqnps80Bq ,,,,:: ::iiM000088BN0mntv7i7vri
  10. , ,,:::: imn0Mmmtsnrrn7, r , vii8NN8B88808NMiiivivrr
  11. ,, ,,,:::: iv7orqrNstr i , . , :09B000809MMNr77i7iii
  12. ,, , ::: 7nmn9rnmqoqi ,,, ... , : . i888@0@0B00mnri;rr;7i
  13. , , , :: iiooqn0rm0Mii:,,,.. ,, : :t00@0N0080NMNpiivii v
  14. , ,, : :vnmn9snmpm98Mmri,, . : iM00BBB88B0ntpv ir :r
  15. ,, , :::rrpsopmMpM0@08ri7;: .. vB9nm0BN808M0mmtvivivi
  16. :::mnmntm9rsq0r;:: iii;rtB80B0npm88B8mrooi; : rr
  17. , iiitpomNni . ... rv8000900B0N8000009svi:;ivr
  18. , ,, , rmmmmqnmm0N: . .. ,: 008MmB8B0N88Mmrporv;r:rr;
  19. , , , iiqtsppmt; : .... ,, iqnp008008800mmqi; ;vi
  20. , , :qnii,.., ,,, ,,.... ,:rr9B00nimNnmrtsiiiii r
  21. . .. ri ... .. ,,.. . ,, 7n08BMi Bmmprvrr :;i;
  22. .. . , , p,,.. ..... , . . ..irinB0Bsio09Nmpii;;;ir
  23. .. . .. , , mi, . ... . ,... ..:n9rvq@8pimtsrr r::::i
  24. .. ...,, ,, tpi,,. .. . .. . ... ..i0, p@nn00Mntviirir
  25. . .. . , ,in0ni ,, .. ... ,, .. ,. ii ::vm8nsrii r;:v
  26. .. . . , rtmmi ,,..... . . . . ... ,7Bnmp7v: iir
  27. . ... , , mMM9m i: .. .... ,.. ,.... . snoii r:r
  28. ....... , iimnmmq , .. ., . . . ..,rnrrii:::i:
  29. . . . ,,, m00Mm0i::i:,, .. . . ,,... .,qmmt7i rri
  30. .. . ,,, ip999n90i ,:,,,,. .. ... . .. . imqp7;ir:ir
  31. . .. ... , iq990n99r,. .. : . . , .. 0imMmsirvit7
  32. .... ., ,,ipN0M0900i .. ,i: , .. . 7v:iii rr rvi
  33. ... p0M9mMN09 . . , ,:: ,,,,, ,. . ii,rBMoq7ivtr
  34. . ....., ,, s08009@0No,. .. . ,, ::: . ,i:,:rir :;ivi
  35. .... , ,ipNMNn0M9N9 . ... . ,, . . . i :mviir:ir
  36. ... . ..,,, ir0NM9N@@88i . . . ... . .: 7iir ii:
  37. ... . , in99n9NN09v .. . . .. . .:i,, , pii rivr
  38. .. , , ioBB80M0@BN,.. . .. . . . ,i, io7iiiiii
  39. .. . , , iNNMnNMNN: . ... . ... . . , ,isrr ;iri
  40. .... . , t088N08B;. .... . . ... . , :tmrq7iro7
  41. ... . ,, v9NNMMBn,.... .. . ...... , .. ,:oi: ;riv:
  42. .. . . , ii000999 ,. .. . . .. ,.. immssvqvpi
  43. .. .. ,,:i009N9M, .. .. .. .... , ,,rq7: irioi
  44. . . . .,, :iN9NN9r. . . . .. .., , sm9priirri
  45. ... . , v80B0v . .. . .. .. .. , r7v:ririqi
  46. . . .. ,,,, r0MM7 ,.... ... . ::::: , 7oprsviir
  47. .. .. .,, , :00B . . . ... , ,. , ,iiir iirii
  48. , .... ,,,,::09i,,. . . . . : , , ,, , ::irri ;r:
  49. ,, . . , qs .. . . . , :: ::: : : iivi7p7
  50. , ,, . , Nr . .. . . , :: :: : : , ., vi:iir ii
  51. , , , , ,,: 0i,.. . .. . , ::: ::: : ...,:t7v7irsp7
  52. , , ,, :rmv .... . ., ,,, ,, .... . . po7rriior
  53. ,, ,, ::ir , .. . . . .. . rnppptspr
  54. ,, , , :::: i.,.... . . . ... .... . .. iiirivsq

是不是还挺有意思的,下面是

github地址 github-img2ascii

composer地址 composer-img2ascii

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/22133.html

相关文章

  • python 图片在线字符画预览

    摘要:文章链接关于图片转字符画,相信大家都不陌生,经常出现在个超有趣的项目中。今天我也来实践这个有趣的项目,更进一步的是把这个功能做成一个在线的网站,直接上传图片生成字符画,在线预览可以让更多的人来体验。至此,生成字符画的脚本完成了。 文章链接:https://mp.weixin.qq.com/s/yiFOmljhyalE8ssAgwo6Jw 关于python图片转字符画,相信大家都不陌生...

    CarterLi 评论0 收藏0
  • 图片ascii字符

    摘要:以上,我们完成了的初步认识扩展使用做反转图首先反转的意思是指,把每个像素点的每个值都与相减的值不改变,减完之后的值再次组成图片,此时得到的新图片就是我们的反转图片。第二步转灰度图或是,又称灰阶图。用灰度表示的图像称作灰度图。 效果图 showImg(https://segmentfault.com/img/remote/1460000008704923?w=1813&h=845); 基...

    SnaiLiu 评论0 收藏0
  • 图片ascii字符

    摘要:以上,我们完成了的初步认识扩展使用做反转图首先反转的意思是指,把每个像素点的每个值都与相减的值不改变,减完之后的值再次组成图片,此时得到的新图片就是我们的反转图片。第二步转灰度图或是,又称灰阶图。用灰度表示的图像称作灰度图。 效果图 showImg(https://segmentfault.com/img/remote/1460000008704923?w=1813&h=845); 基...

    wing324 评论0 收藏0
  • 图片ascii字符

    摘要:以上,我们完成了的初步认识扩展使用做反转图首先反转的意思是指,把每个像素点的每个值都与相减的值不改变,减完之后的值再次组成图片,此时得到的新图片就是我们的反转图片。第二步转灰度图或是,又称灰阶图。用灰度表示的图像称作灰度图。 效果图 showImg(https://segmentfault.com/img/remote/1460000008704923?w=1813&h=845); 基...

    0xE7A38A 评论0 收藏0
  • 用纯前端的方式来实现图片字符

    摘要:最近花了几天时间,做了一个图片转字符画的工具,一开始想做成用服务器来生成图像的形式,但是后来发现可以不依赖服务器生成图片,顺便还能把项目托管到上,因此就把项目做成了纯前端的形式。 最近花了几天时间,做了一个图片转字符画的工具,一开始想做成用服务器来生成图像的形式,但是后来发现可以不依赖服务器生成图片,顺便还能把项目托管到 Github Pages 上,因此就把项目做成了纯前端的形式。 ...

    NikoManiac 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<