[前端]图片转换为字符画/文字云遇到的问题

最近想做一个图片转成字符画的功能


转换出来的效果类似这种

在查看大佬的源码时,突然灵光一闪,想到以前在用echarts做文字云遇到的一个问题。那个时候是使用了echarts的文字云插件库做的(https://github.com/ecomfe/echarts-wordcloud

文字云效果

遇到的问题就是有一些图片上传上去无法正常转换成文字云。那个时候试过转换不同格式等方法,都没有找到问题的根源。而这次做字符画的时候,终于发现了这个问题是出在哪。

在一位大佬关于转换字符画的文章里写到


     R = data[index],  
     G = data[index + 1],  
     B = data[index + 2],  
     gray = ~~(R * 0.3 + G * 0.59 + B * 0.11);  

代码里也是这样取的(整段代码可以看大佬的原文https://blog.csdn.net/qq_27892551/article/details/50504117)而那些失败的图片,RGB的值都是0,但A的值是0或者255。

原图

转换出来失败的图

个人猜测这种都是二值图像,所以没有RGB,只有A是0或255代表黑或白。而大部分转换为字符画的处理(以及文字云转换)中都忽略了A,遇到这种二值图像得到的gray都是0,无法抽象出图像的轮廓。
而且灰度图像可能也会出现这种问题。

所以可以增加对A的处理,当RGB都为0,但A(A = data[index + 3] )有值的时候,gray也需要有值。可以根据A的大小来取值。这样就可以解决这个问题了。(echarts的文字云应该也是同样的问题,但是源码比较复杂还没好好研究。)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • How to Monitor Progress of (Copy/Backup/Compress) Data us...
    leizy2467阅读 10,421评论 0 4
  • 光阴似箭,转眼间,美好而又让人留念的暑假过去了,就好像在眼前放了一部电影,让暑假生活的趣事深深的烙印在了脑海当中。...
    丝路花雨_a690阅读 1,527评论 0 0
  • 如果风愿意停下脚步 那么你是否愿意回头 看一眼 零落在尘土中的我 因为爱 我低入了尘埃 当风再一次将我耳边的...
    哑舍的小故事阅读 2,435评论 0 1