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

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

转换出来的效果类似这种

在查看大佬的源码时，突然灵光一闪，想到以前在用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的文字云应该也是同样的问题，但是源码比较复杂还没好好研究。）