一灰灰的博文
Docsy Blog
- 220526-程序员的浪漫-用她的名字作画Python版
- 220522-程序员的浪漫：用她的名字作画
- 211126-Java实现位图转矢量图
- 211122-Java实现GIF图转字符动图实例demo
- 211121-Java实现图片转字符输出示例demo
- 211120-Java实现Gif图转字符动图
- 211116-Java实现图片转字符图片示例demo
- 211112-Java实现图片灰度化
220526-程序员的浪漫-用她的名字作画Python版
hello，大家好，我是一灰灰，之前介绍了一篇使用她的名字来画出她的美图的文章，其中主要使用的Java来实现的，今天呢，我们再来用Python来实现一下
同样最终的代码量也不会超过三十行
1. 环境相关
这里我们选择python来作为我们的主要绘图武器，至于python的环境安装相关的这里就不介绍了，有兴趣的小伙伴自行探索
再python界，操作图片的利器PIL，相信大伙也都清楚，接下来将使用它来实现我们的目标
安装依赖
pip install Pillow
2. 基本知识点
再正式开始之前，给不太熟悉PIL操作的小伙伴，简单介绍一下它的基本用法，当然也会重点突出一下我们将采用的几个方法
2.1 加载图片
from PIL import Image
img = Image.open("图片地址")
是的，就这么简单，直接使用 Image.open() 就可以读取图片了
2.2 图片基本信息获取
获取图之后，通常需要关注的几个参数，如宽高，通道
width, height = img.size
# RGBA 表示包含透明度，如png
# RGB 不包含透明度，如jpg
mode = img.mode
2.3 创建画板，用于编辑
如果我们想在这个图片上进行绘制信息，或者说希望创建一个空的画板，那么我们就先需要获取到一个ImageDraw对象
from PIL import ImageDraw
# 获取图片对应的画板
draw = ImageDraw.Draw(img)
上面获取到draw对象之后，就可以根据它提供的各种方法，来绘制各种几何图形、文字、图片等；如果我们希望获取一个空的画板，可以怎么操作呢？
# 创建一个待透明度的图，第二个元组参数为图的宽高，第三个表示背景全透明
new_img = Image.new("RGBA", (width, height), (255, 255, 255, 0))
ImageDraw提供了很多绘图的方法，下面给出一些常用的case，就不重点叙述了
new_img = Image.new("RGBA", (480, 640), (255, 255, 255, 0))
# 创建绘制对象
draw = ImageDraw.Draw(new_img)
# 从 (10, 10) -> (100, 100) 画一条黄色直线
draw.line((10, 10, 100, 100), 'red')
# 绘制矩形 (100, 110) -> (200, 200),黑色填充,黄色填充
draw.rectangle((100, 110, 200, 200), 'black', 'red')
# 绘制椭圆
draw.ellipse((300, 300, 500, 400), 'yellowgreen', 'red')
# 园
draw.ellipse((250, 250, 350, 350), 'seagreen', 'red')
# 绘制文本，选择宋体，字体大小为28，uniquecode编码
font = ImageFont.truetype("simsun.ttc", 28, encoding="unic")
draw.text((300, 200), u'一灰灰Blog', 'red', font)
重点关注绘制文本这里，draw.text((x,y), "文字", "文字颜色", 字体), 这就是接下来要使用的方法
2.4 获取像素
如果我们希望获取指定坐标的RGB值，如下操作即可
pixel = img.getpixel((x, y))
看到这里的小伙伴，结合前一篇博文，要想实现python版的用她的名字绘图，相信就很简单了吧
2.5 预览和保存图片
# 展示图片
new_img.show()
# 保存图片
new_img.save("save.png")
3. Python版文字绘图
接下来，进入正式的实现
from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont
def render(path: str, name: str, save: str):
img = Image.open(path)
width, height = img.size
# 创建画板，放大24倍
new_img = Image.new("RGBA", (width * 24, height * 24), (255, 255, 255, 0))
draw = ImageDraw.Draw(new_img)
# 加载自定义字体，字体文件来自 https://www.diyiziti.com/Builder/446
font = ImageFont.truetype(u"D://MobileFile/潇洒手写体.ttf", 20, encoding="unic") # 设置字体
render_index = 0
for x in range(width):
for y in range(height):
pixel = img.getpixel((x, y))
draw.text((x * 24 + 2, y * 24 + 2), name[render_index], pixel, font) # 再指定的地方使用文字替代之前的纯色
render_index = (render_index + 1) % len(name)
new_img.save(save)
依然以小黄人为例，来看下生成的效果如何
从上面的图片来看，和前面java版输出差不离，有兴趣的小伙伴动手搞起来吧；我是一灰灰，觉得不错的小伙伴给个收藏、点赞、评论支持一下呗
220522-程序员的浪漫：用她的名字作画
hello，各位小伙伴们大家早上|中文|晚上|凌晨好，相信看这篇文章的有很多新朋友，估计也有少量的老朋友，首先做个简短的自我介绍，我是一灰灰，码农界的资深搬运工；今天呢，没有站在我身边的捧哏老师，那就只好给大伙来个单口的灌水博文了
大街上铺天盖地的520促销优惠买一赠一的宣传语，宣告了初夏的第一个特殊节日，可好巧不巧的是到了5.21号这天我才发现，居然又到了520啊，然后再一看手机，卧槽，居然过了。。。这特么回家还不得跪我那斥巨资200大洋买的机械键盘了
赶紧发动一下高达249IQ的大脑，思考一下有什么补救的措施，是时候解开封印已旧的人肉爬虫技能，看看票圈晒图的朋友们，能不能提供有价值的灵光一现
功夫终负有心人，果不其然毫无收获；老老实实的发挥一下职业特长，码农可以整些什么浪漫的活 呢？
- 写个html页面，陪她去看流星雨
- 用她的照片组个带音乐、能自动播放的PPT
- 黑个商场大屏幕，附上她的美图秀秀 + 爱你一万年
- AI自动写个
xxx 爱你一万年的藏头诗 - 写个无界面的APP，偷偷装在她的手机上，设置定时弹出一朵鲜花（不怕被打的话恐怖图片也可以🤭）
可选择的不少，接下来就剩下一个小问题了，5.21号送出5.20号的小礼物能被原谅么？（请看到这里的美少女么摸着自己的良心，在评论区大声告诉我”能“ 好么）
话接上文，就算有再多得小仙女告诉我能，讲道理我也不敢信啊，接下来免费给各位看官分享一个价值99的idea，用她的名字做一幅画（如下），下面这么大的工作量，delay个一两天不很正常么（请大声告诉我，是不是很机智）
接下来，老司机教你如何使用三十行用她(他它)的名字画出她的艺术画
写了这么多居然还没有进入主题，这文章灌水得我自己都有点看不过去了😓，言归正传，接下来我们看下，如何实现用她的名字来作画呢？
1. 作战思路
目标有了，接下来就是定方案了，大家都知道计算机的世界是由0和1组成，那么图片的世界又是由什么组成呢？
我已经听到聪明机智的小伙伴内心的答案了，对，没错，就是一个一个带有颜色的像素块
那么我们要做的是什么呢？答案已经呼之欲出了，各位少侠小仙女么，请大声告诉我好么
咳咳，说正经的，就是将将这一个一个像素块，然后用她(他它)的名字替换就行了
2. 战前准备
俗话说兵马未动，粮草先行，正式开干之前，先做一些必要的准备
- 一张美丽动人的图片
- 先将背景处理一下，保留关键的人物信息，减少噪音
- 不会ps的小伙伴，可以直接使用 https://www.remove.bg/zh 三秒完成抠图
- 选择开动的技术栈，民主选择
- java,
- php,
- golang,
- js,
- python?
既然如此，那我们遵循自愿原则，就决定是你了 – 爪蛙（JAVA）
3. 开战
感谢各位小伙伴选择java 我的本命技能，那我们来看一下如何来实现我们的目的
步骤拆解：
- 读取图片
- 并创建一个等大的画板
- 遍历图片的每个像素点，读取像素点的RGB
- 在画板对应的位置上渲染文字
- 保存画板，大功告成
实现源码:
public static Color int2color(int color) {
int a = (0xff000000 & color) >>> 24;
int r = (0x00ff0000 & color) >> 16;
int g = (0x0000ff00 & color) >> 8;
int b = (0x000000ff & color);
return new Color(r, g, b, a);
}
public void renderCharPhoto(String imgPath, String name, String saveFile) throws Exception {
// 第一步，载图片
BufferedImage img = ImageIO.read(new File(imgPath));
int w = img.getWidth(), h = img.getHeight();
// 第二步，创建等大的画板
BufferedImage output = new BufferedImage(w, h, img.getType());
Graphics2D g2d = output.createGraphics();
g2d.setFont(new Font("宋体", Font.PLAIN, 1));
int index = 0;
for (int x = 0; x < w; x++) {
for (int y = 0; y < h; y++) {
// 第三步，遍历每个像素点，并获取对应的rgb
char ch = name.charAt((index++) % name.length());
g2d.setColor(int2color(img.getRGB(x, y)));
// 第四步，写上他她它的名字
g2d.drawString(String.valueOf(ch), x, y);
}
}
// 第五步，保存图片
g2d.dispose();
ImageIO.write(output, "png", new File(saveFile));
}
就这么简单，赶紧跑一下试试效果
好像有什么地方不对劲，这和原图没啥两样啊，那么问题出在哪呢？一个像素点上的文字，我的钛合金四眼看不见啊，那可以怎么办呢？
有道理，把图片放大，不就ok了么，那么将上面的画板调整一下，放大24倍，设置字体大小20，给字与字之间留点空隙
public void renderCharPhoto(String imgPath, String name, String saveFile) throws Exception {
BufferedImage img = ImageIO.read(new File(imgPath));
int w = img.getWidth(), h = img.getHeight();
BufferedImage output = new BufferedImage(w * 24, h * 24, img.getType());
Graphics2D g2d = output.createGraphics();
g2d.setFont(new Font("宋体", Font.PLAIN, 20));
int index = 0;
for (int x = 0; x < w; x++) {
for (int y = 0; y < h; y++) {
char ch = name.charAt((index++) % name.length());
g2d.setColor(int2color(img.getRGB(x, y)));
g2d.drawString(String.valueOf(ch), x * 24 + 2, y * 24 + 2);
}
}
g2d.dispose();
ImageIO.write(output, "png", new File(saveFile));
}
这标准的宋体好像暴露了什么，要是告诉他(她它）这是手绘的，能信么？
为了更逼真一点，换个手绘字体试一试，网上搜索一下，从这里 https://www.diyiziti.com/Builder/446 下载了一个 潇洒手写体资源
然后再调整一下上面代码中的字体设置
public void renderCharPhoto(String imgPath, String name, String saveFile) throws Exception {
BufferedImage img = ImageIO.read(new File(imgPath));
int w = img.getWidth(), h = img.getHeight();
BufferedImage output = new BufferedImage(w * 24, h * 24, img.getType());
Graphics2D g2d = output.createGraphics();
// 使用自定义的字体
try (InputStream inputStream = Files.newInputStream(Paths.get("D://MobileFile/潇洒手写体.ttf"))) {
Font font = Font.createFont(Font.TRUETYPE_FONT, inputStream);
g2d.setFont(font.deriveFont(Font.PLAIN, 20));
}
int index = 0;
for (int x = 0; x < w; x++) {
for (int y = 0; y < h; y++) {
char ch = name.charAt((index++) % name.length());
g2d.setColor(int2color(img.getRGB(x, y)));
g2d.drawString(String.valueOf(ch), x * 24 + 2, y * 24 + 2);
}
}
g2d.dispose();
ImageIO.write(output, "png", new File(saveFile));
}
如果对方很熟悉你的字体怎么办？
解决办法也有，应用商店搜索一下"造字"，还可以顺便给自己打造一个独一无二的字体
棒，这下感觉无懈可击了啊，只要把上面的图片找个打印店，彩绘一下，完事了啊；拿走，不谢
如果不幸的是，当你有个机智的对象时，那么她/他/它多半会给你灵魂一问，你是如何做到，字和间距都分毫不差的？
最后叨叨了这么久，忽然想到一个问题，看到这里的单身小伙伴们，话说你们是出于啥心里继续看完的，520这个节日，和你们这些单身狗有什么关系呢😏
4. 战后福利
上面三十行代码手把手教你实现了一个哄(糊弄)女票的方法，基本功能还是很完整的，当然如此贴心的一灰灰我，也给各位小伙伴提供了更友好的方式，如直接从网上加载图片、字体
public void testCharPicture() throws Exception {
prefix = "/tmp/";
String img = "http://hbimg.b0.upaiyun.com/2b79e7e15883d8f8bbae0b1d1efd6cf2c0c1ed1b10753-cusHEA_fw236";
ImgPixelWrapper.build()
.setSourceImg(img)
.setChars("小黄人")
// 字体文件下载地址: https://www.diyiziti.com/Builder/446
.setFontName("https://font.js.live/front/font/download?id=446")
.setBlockSize(24)
.setFontSize(22)
.setBgPredicate(color -> {
// 指定背景色，不渲染文本
if (color == 0) return true;
Color rc = ColorUtil.int2color(color);
// 将白色当作背景色
return rc.getRed() >= 245 && rc.getGreen() >= 245 && rc.getBlue() >= 245;
})
.setPixelType(PixelStyleEnum.CHAR_SEQ_SCALE_UP)
.build().asFile(prefix + "/char_pic_xhr.jpg");
System.out.println("---- over ---");
}
对应的源码： https://github.com/liuyueyi/quick-media
引入方式也很简单
<artifactId>image-plugin</artifactId>
<groupId>com.github.liuyueyi.media</groupId>
<version>2.6.4</version>
是不是很贴心，是不是很感动，是不是应该点个赞、给个评论支持，加个收藏下次备用呢
211126-Java实现位图转矢量图
通过前面几篇图片转字符、灰度图的文章介绍之后，接下来我们再来看一个有意思的东西，基于前文的基础，实现位图转矢量图的功能
关于位图与矢量图的简单理解如下：
- 位图：如Jpg/png，放大之后会失真，看到像素块
- 矢量图：如svg，放大图片也不会失真
1. 实现策略
要实现位图转矢量图，可不是一个简单的活；当然我们这里也不追求完美实现，在前文的基础上，可以想到一个实现策略
- 首先根据位图输出字符画
- 然后通过字符画，来生成矢量图
基于上面这个策略，第一步生成字符前一篇博文已经介绍过了；接下来重点就是如何根据输出的字符数组，来生成svg呢？
2. 实现方法
第一步位图输出字符画的代码就不贴了，有兴趣的小伙伴可以参考前文
接下来我们重点看一下如何根据生成的List<String>来生成svg图
首先我们定义一个svg模板，用于来表示基于字符输出的矢量图，如下
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 {width} {height}"
style="width: 100%; height: 100%; overflow: auto; fill: {BG_COLOR}">
<script type="text/javascript"><![CDATA[
window.addEventListener('load',function() {
var bounding_rect = document.getElementById("bounding-rect");
var text = document.getElementById("ascii");
var bb_text = text.getBBox();
var font_size = Math.round(1e3 * bb_text.height / bb_text.width) / 1e3;
text.setAttribute("font-size", font_size + "px");
bb_text = text.getBBox();
bounding_rect.setAttribute("width", bb_text.width);
bounding_rect.setAttribute("height", bb_text.height);
}, false);
]]></script>
<style type="text/css">
text.ascii-art {
user-select: none;
whiteSpace: "pre";
fill: {FONT_COLOR};
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
}
</style>
<rect x="0" y="0" height="100%" width="100%" id="bounding-rect"/>
<text x="0" y="0" id="ascii" font-family="monospace, courier" text-anchor="start" font-size="1px" class="ascii-art">
<tspan x="0" dy="0.794%" textLength="100%" xml:space="preserve"> ux </tspan>
<tspan x="0" dy="0.794%" textLength="100%" xml:space="preserve"> ..... </tspan>
</text>
</svg>
对于上面的模板中，有几个关键值需要替换
- svg 标签中
{width}: 生成矢量图的宽度{height}: 生成矢量图的高度{BG_COLOR}: 背景颜色
- style 样式设置
{FONT_COLOR}: 字符渲染颜色
其次tspan标签内容就是我们需要输出的字符，一行字符对应一个tspan标签
因此我们的实现逻辑就是上面这个模板的关键字替换输出了
/**
* 字符转svg矢量图
*
* @param lines
* @param bgColor
* @param fontColor
* @return
*/
public static String ascii2svg(List<String> lines, String bgColor, String fontColor) {
StringBuilder builder = new StringBuilder();
int height = lines.size();
int width = lines.stream().max(Comparator.comparingInt(String::length)).get().length();
builder.append(StrUtil.replace(SVG_START, "{width}", String.valueOf(width), "{height}", String.valueOf(height), "{BG_COLOR}", bgColor, "{FONT_COLOR}", fontColor));
// 计算tspan标签中的dy值
float dy = 100.0f / height;
String start = String.format("<tspan x=\"0\" dy=\"%.3f%%\" textLength=\"100%%\" xml:space=\"preserve\">", dy);
String end = "</tspan>";
for (String line : lines) {
builder.append(start)
// 转义支持
.append(StrUtil.replace(line,"&", "&", "\"", """, "<", "<", ">", ">"))
.append(end).append("\n");
}
builder.append(SVG_END);
return builder.toString();
}
注意上面的实现逻辑中的几个变量就是上面模板的关键值，就不重复输出了；详情看文末的源码查看
- SVG_START
- SVG_END
3. 实测演示
上面已经贴出了核心的实现代码，接下来我们根据成品来看一下输出效果如何；下面是直接使用封装好的方法来调用测试
项目源码：https://github.com/liuyueyi/quick-media/tree/master/plugins/image-plugin
@Test
public void testSvg() throws Exception {
String file = "http://pic.dphydh.com/pic/newspic/2017-12-13/505831-1.png";
// String file = "http://5b0988e595225.cdn.sohucs.com/images/20200410/76499041d3b144b58d6ed83f307df8a3.jpeg";
ImgPixelWrapper.build()
.setSourceImg(file)
.setBlockSize(3)
.setRate(0.6)
.setPixelType(PixelStyleEnum.CHAR_BLACK)
.build()
.asSvgFile(prefix + "/out.svg");
}
输出的svg文件如下
实例图:
211122-Java实现GIF图转字符动图实例demo
上一篇文章介绍了静态图转字符的实现demo；接下来也该是动态图转字符的demo了
从前面几篇文章的学习过程中，要想实现这个功能就属于信手拈来了
单张图转字符完成之后，动图无非是每一张静态图都转一遍，保存最后的结果即可
这里我们就不介绍基础的JDK写法了（感兴趣的可以到前面几篇文章中获取），我们直接进入进阶的玩法
接下来我们借助开源项目 https://github.com/liuyueyi/quick-media 来迅速的实现输出Gif字符图
@Test
public void testCharLines() {
String file = "https://c-ssl.duitang.com/uploads/item/201707/11/20170711194634_nTiK5.thumb.1000_0.gif";
java.util.List<java.util.List<String>> list = ImgPixelWrapper.build()
.setSourceImg(file)
.setBlockSize(3)
.setRate(0.6)
.setPixelType(PixelStyleEnum.CHAR_COLOR)
.build()
.asChars();
for (List<String> s: list) {
for (String t: s) {
System.out.println(t);
}
System.out.println("------- 分割 -------");
}
}
注意上面的实现，List<String> 表示一个张字符图，一个gif图可以转换成多个
具体的输出字符太多，这里简单截取几个看一看效果
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$d?{/||_z$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$jJ$#h@$$p/$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$dc%[ `}k$*\M$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$}@t )WW_d$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$}@^ "L@nf$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$(%. )%Z($$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$${$] <&p($$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$cZ&l i8Lc$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$M+m$%/' [$}M$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$${8ouL@a)' 0af$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$dU#^ IC@< !$-$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$Qhc ` bLd$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$Qoj xM{$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$QwZ _$t$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$1@! ;$+$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$fo*, `$?$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$+$8W\` '$\d$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$dCp"YB) ,$@)d$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$Qw0 ^ 'zX$)d$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$QZO "L@}d$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$dco. \]ZB{M$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$?@( l]]d&}$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$dz%_ +]]{Wpj$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$1QB\ :]]]]/@jM$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$ju$w> '-]]]]]Xkf$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$Q{b$bc{}rm- '_]]]]]?!(M$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$f{YbW%$w! "_]]]]]]lQ$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$Mf{>$\\:~]]]]]]]i{$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Qqh]]]]]]]]-:Q$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$_$r]]]]]-l+d$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
------- 分割 -------
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$d({/{)n__nd$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$fY$#b%$@$$Bc)$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$MuB} '[d$qvBJQ$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$n%j [*&Q$]$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$?$, ^c@$Jd$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$[$' _WW/$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$?${ ,a#\$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$QL8> \*qf$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$(z$%f' i@/M$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$zq8Q0B#t` v&)$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$[@< :X%- ,B)$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$MCp ` 0wc$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$Q0m {B)$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$r#. I$}$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$($) .B]$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$dY8~ #($$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$zk$Bx\ #nQ$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$}$!r8m W$/Q$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$]$ `" ~r$tQ$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$-$` `U$)d$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$)$_ "]L@-M$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$Qdq. :]]p8{$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$[@c. +]]}#dj$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$d{@Q" \]]]]\@rM$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$d-WW\` '_]]]]]ckf$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$M]XB&0f1xZ0 '<]]]]]?l(M$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$Q}/maM$p} ^_]]]]]]!Q$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Q{~#z,;<?]]]]]]i{$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$dzW[]]]]]]]-;c$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$1BU]]]]]-l+d$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
211121-Java实现图片转字符输出示例demo
前面几篇博文介绍了使用jdk来对图片做一些有意思的转换，接下来我们再介绍一个有意思的玩法，直接根据图片，输出一个二维字符数组，实现用字符来实现绘画的场景
各位小伙伴可能都有看到过一些有趣的注释，比如大佛，美女之类的，通关本文，相信你也很可以很简单的实现类似的场景
关键实现，在前面的文章中其实也说到了，下面是超链
接下来我们需要做的就是将之前转成字符图片输出的地方稍微改一下，根据当前色颜色，来选择合适的替换字符保存下来
所以关键的实现在于，如何根据颜色来选择字符
// 这个字符来自于github搜索结果，下面将最后一个从原来的点号改成了空格，即白色时，不输出字符
private static final String DEFAULT_CHAR_SET = "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\\\"^`' ";
/**
* 基于颜色的灰度值，获取对应的字符
* @param g
* @return
*/
public static char toChar(Color g) {
double gray = 0.299 * g.getRed() + 0.578 * g.getGreen() + 0.114 * g.getBlue();
return DEFAULT_CHAR_SET.charAt((int) (gray / 255 * DEFAULT_CHAR_SET.length()));
}
接下来我们针对之前的方法，稍微改造一下
Color getAverage(BufferedImage image, int x, int y, int w, int h) {
int red = 0;
int green = 0;
int blue = 0;
int size = 0;
for (int i = y; (i < h + y) && (i < image.getHeight()); i++) {
for (int j = x; (j < w + x) && (j < image.getWidth()); j++) {
int color = image.getRGB(j, i);
red += ((color & 0xff0000) >> 16);
green += ((color & 0xff00) >> 8);
blue += (color & 0x0000ff);
++size;
}
}
red = Math.round(red / (float) size);
green = Math.round(green / (float) size);
blue = Math.round(blue / (float) size);
return new Color(red, green, blue);
}
private void parseChars(BufferedImage img) {
int w = img.getWidth(), h = img.getHeight();
// 这个size可用来控制精度，越小则越像原图
int size = 4;
List<List<String>> list = new ArrayList<>();
for (int y = 0; y < h; y += size) {
List<String> line = new ArrayList<>();
for (int x = 0; x < w; x += size) {
Color avgColor = getAverage(img, x, y, size, size);
line.add(String.valueOf(toChar(avgColor)));
}
list.add(line);
}
System.out.println("---------------------- 开始 ------------------------");
for (List<String> line: list) {
for (String s: line) {
System.out.print(s + " ");
}
System.out.println();
}
System.out.println("---------------------- 结束 ------------------------");
}
注意上面的实现，需要重点注意的是原图的遍历方式，一层一层的遍历，即外部是y轴，内部循环是x轴
接下来看一下测试case
@Test
public void testChars() throws Exception{
String file = "http://pic.dphydh.com/pic/newspic/2017-12-13/505831-1.png";
BufferedImage img = ImageLoadUtil.getImageByPath(file);
// 缩放一下图片为300x300，方便对输出字符截图
img = GraphicUtil.scaleImg(300,300, img);
parseChars(img);
System.out.println("---over------");
}
实际输出如下(实际输出结果与皮神还是很像的)
---------------------- 开始 ------------------------
l m
' b $ I
f $ $ [
\ 8 $ $ f
i ~ , x $ $ $ u
_ $ $ a X } ^ ' W $ $ $ c
c $ $ $ $ B L ] ' } q $ $ $ z
` d $ $ $ $ $ 0 r ( " t < U $ $ c
, * $ $ $ $ z < + j | ` \ t < < O $ n
l W $ $ $ U < < < ~ t [ { + < < _ W f
> & $ $ 0 < < < < < - j ~ \ < < < < n (
! # $ k < < < < < < < ( t ` j < < < < ] ?
: k B 1 + < < < < < < + n ! > } < < < < \ i
^ C z ( [ ~ < < < < < < f ] 1 < < < < < u `
1 v ( ) ? < < < < < < | { ( < < < < < u
I v / ( 1 + < < < < < 1 } ' l > i " \ < < < < ~ x
1 v ( ( [ ~ < < < < z r z t | \ n z f ( + ' t < < < < ? /
" / v | ) ? < < < < < < < < < < < < < ] f ) ^ " \ < < < < | ?
" ) n v / ~ < < < < < < < < < < < < < ~ j [ l 1 < < < + z ^
- | < < < < < < < < < < < < < < < < ] j ~ { < < < [ u
' f < < < < < < < < < < < < < < < < < < ~ z | < < ~ ( /
] + < < < < < < < < < < < < < < < < < < < < n - < ? n i
' | < < < < < < < < < < < < < < < < < < < < < < { ~ ) v
) + < ] 0 w f < < < < < < < < < < < < < < < < < < ? / 1
x < ~ * @ " | [ < < < < < < < < < < < < < < < < < } c '
i ( < } $ $ x w \ < < < < < < < < < < < < < < < < < / -
/ < < + % $ $ 8 _ < < < < < < < < < < < < < < < < < { >
_ q f < < ( q m } < < < < < < < < < < < < { \ ~ < < < } <
" O U Z < < < < < < < < < < n f < < < < < n r [ h + < < \ "
j U U 0 } < < < < _ < < < < ~ ~ < < < < < M u ( $ r < < t
U U U Q ( < < < < { Y v Y 0 Z } < < < < < * $ $ $ x < < |
J U U O [ < < < < < # * # # o a t < < < < j $ $ # _ < < )
Y U U O < < < < < < W b q q k # # O r \ < < [ / + < < } <
x U L r < < < < < < d U c c C w * o L < < < < < < < < f '
} Q n < < < < < < < J x x x x z w W [ < < < < < < < < f : + [ { ,
^ f < < < < < < < < L x x x x x J Y < < < < < < _ Y O Y ] \ j \ [ _ } -
/ < < < < < < < < L x x x x x C _ < < < < < - Z U U Z j ? < < < < < \ v >
l | < < < < < < < Y x x x x X | < < < < < < J U U U z < < < < < < < + ) (
i ) t / L | + < < < < < c x x x c x < < < < < < ) L U U C t < < < < < < < < f !
? x ( < < < < ? f x j ~ < < 1 J x Y x < < < < < < < u U U U 0 < < < < < < < < + r
1 { < < < < < < < < < _ x \ < < t v 1 < < < < < < < < n U U Z [ < < < < < < < v x _
< ) < < < < < < < < < < < < { u ] < < < < < < < < < < < - 0 m { < < < < < < < } n | / n r ( / \ 1 } i '
/ < < < < < < < < < < < < < < ~ U < < < < < < < < < < < | c _ < < < < < < < - n < < < < < < < < < < { f / ( ] ^
| < < < < < < < < < < < < < < < ) n ] _ ~ < < < < < / n 1 < < < < < < < ~ [ L + < < < < < < < < < < < < < < _ t / 1 l
t < < < < < < < < < < < < < < < v j ( ( ) - < < ~ } + < < < < < < < < _ 1 Q j < < < < < < < < < < < < < < < < < < < ) f ( :
) + < < < < < < < < < < < < < < c [ ] ? ~ < < < < < < < < < < < < ~ } ( c t [ < < < < < < < < < < < < < < < < < < < < < ~ / t <
^ x { } ] ] - _ ~ < < < ~ _ ~ r c < < < < < < < < < < < < < < < - ) ( u < \ < < 1 - < < < < < < < < < < < < < < < < < < < < < \ )
< c ( ( ( ( ( ( ( ) ) / Y n n < < < < < < < < < < < < < < ~ { ( ( v i f < _ ( ( 1 _ < < < < < < < < < < < < < < < < < < + j '
! v n ( ( ( ( r X c f ~ < < < < < < < < < < < < < < < ~ 1 ( ( c ; r < ] ( ( ( ( } + < < < < < < < < < < < < < < < + f '
] X x u u | + < < < < < < < < < < < < < < < < < < { ( t n ^ \ f < { ( ( ( ( ( ( [ ~ < < < < < < < < < < < < + / '
t ~ < < < < < < < < < < < < < < < < < < < < < < - ( v { ? ] < ) ( ( ( ( ( ( ( ) ? < < < < < < < < < < + \
u < < < < < < < < < < < < < < < < < < < < < < < { w : \ < + ( ( ( | ( ( ( ( ( ( { ~ < < < < < < < ~ (
i \ < < < < < < < < < < < < < < < < < < < < < < < ~ n j < - ( ( / x t c n ( ( ( ( ) - < < < < < ~ (
t < < < < < < < < < < < < < < < < < < < < < < < < < n + ] : x < [ ( ( v ' ! | n X \ ( ( [ < < < ~ /
u < < < < < < < < < < < < < < < < < < < < < < < < < x ( 1 | r t ( < { ( x + " { j z r { ~ ~ f '
~ 1 < < < < < < < < < < < < < < < < < < < < < < < < < t ] t 1 + < < < ( ( x ' ~ / n u ^
t < < < < < < < < < < < < < < < < < < < < < < < < < < \ i n ( ( ? < + ( v :
' r < < < < < < < < < < < < < < < < < < < < < < < < < < / " z ( ( ( } ] | \
_ [ < < < < < < < < < < < < < < < < < < < < < < < < < < t L t \ Y u z z `
/ < < < < < < < < < < < < < < < < < < < < < < < < < < < / ; Z Q Q \ , I
' f < < < < < < < < < < < < < < < < < < < < < < < < < < < + # 0 d d d }
] ? < < < < < < < < < < < < < < < < < < < < < < < < < < < < Z d d d b ?
\ < < < < < < < < < < < < < < < < < < < < < < < < < < < < < u o b d k ~
j < < < < < < < < < < < < < < < < < < < < < < < < < < < < < ] | ? u d :
j < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < j
r < ~ < < < < < < < < < < < < < < < < < < < < < < < < < < < < /
/ + ( ( { ? + < < < < < < < < < _ ? ] ] ] ] ] - + < < < < < < f
i f ( ( ( ( ( 1 { } [ [ [ } 1 ( ( ( ( ( ( ( ( ( ( ) } _ < < < /
] X ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( } < < |
: ( f ) v u ( ( \ j u c c u x J d m C J | ( ( ( ( ( ( ( ( ( [ r \
` \ J t ] ~ { ( ( n X r , ' ` < ( j c C z r ( ( ( ( ( | n z }
u X z r } / u c f \ 1 l ] j z J Y Y n ) } } v _
+ r ( ) ( - I I n c \ + < < ] L Z u ^
' i ] } | ( - x O w
; 1 \ z J
---------------------- 结束 ------------------------
虽说上面这个是输出了字符图，从结果上看也比价像，但是需要注意的是，若图片的背景非白色，主角不是那么突出的场景，通过上面的方式输出的结果可能就不太友好了，解决办法当然就是识别背景，识别主体，针对主体元素进行转换（这个过程后面有机会再介绍）
接下来我们借助开源项目 https://github.com/liuyueyi/quick-media 来迅速的实现字符图输出
以一个冰雪女王的转换图来验证下效果
String file = "http://5b0988e595225.cdn.sohucs.com/images/20200410/76499041d3b144b58d6ed83f307df8a3.jpeg";
BufferedImage res = ImgPixelWrapper.build().setSourceImg(file).setBlockSize(4).setPixelType(PixelStyleEnum.CHAR_BLACK).build().asBufferedImg();
211120-Java实现Gif图转字符动图
前面介绍了两篇基于jdk实现图片灰度处理、转字符图片的操作，接下来我们在将之前的能力扩展一下，支持将一个gif图灰度化或者转gif字符图
本文的实现主要在前面两篇文章的基础上来实现，推荐没有看过的小伙伴也可以瞅一眼
单张图的灰度化与转字符实现之后，gif图的实现就简单多了；gif图无非是多张图组合而成，将每一张图转换之后，再重新组装成gif图就完事了
这里我们使用的gif工具类来自于https://github.com/liuyueyi/quick-media/tree/master/plugins/base-plugin/src/main/java/com/github/hui/quick/plugin/base/gif
核心关键类为GifEncode与GifDecode；借助它来实现gif图的加载与保存
首先我们将上篇博文中的转字符图的方法抽取一下
Color getAverage(BufferedImage image, int x, int y, int w, int h) {
int red = 0;
int green = 0;
int blue = 0;
int size = 0;
for (int i = y; (i < h + y) && (i < image.getHeight()); i++) {
for (int j = x; (j < w + x) && (j < image.getWidth()); j++) {
int color = image.getRGB(j, i);
red += ((color & 0xff0000) >> 16);
green += ((color & 0xff00) >> 8);
blue += (color & 0x0000ff);
++size;
}
}
red = Math.round(red / (float) size);
green = Math.round(green / (float) size);
blue = Math.round(blue / (float) size);
return new Color(red, green, blue);
}
private BufferedImage parseImg(BufferedImage img) {
int w = img.getWidth(), h = img.getHeight();
// 创建新的灰度图片画板
BufferedImage out = new BufferedImage(w, h, img.getType());
Graphics2D g2d = out.createGraphics();
g2d.setColor(null);
g2d.fillRect(0, 0, w, h);
int size = 12;
Font font = new Font("宋体", Font.BOLD, size);
g2d.setFont(font);
for (int x = 0; x < w; x += size) {
for (int y = 0; y < h; y += size) {
Color avgColor = getAverage(img, x, y, size, size);
g2d.setColor(avgColor);
g2d.drawString("灰", x, y);
}
}
g2d.dispose();
return out;
}
接着就是Gif的操作了
@Test
public void testRender() throws IOException {
String file = "https://c-ssl.duitang.com/uploads/item/201707/11/20170711194634_nTiK5.thumb.1000_0.gif";
// 从网络上下载图片
GifDecoder decoder = new GifDecoder();
decoder.read(FileReadUtil.getStreamByFileName(file));
// 这里是核心的转换逻辑
List<ImmutablePair<BufferedImage, Integer>> frames = new ArrayList<>();
for (int i = 0; i < decoder.getFrameCount(); i++) {
BufferedImage img = decoder.getFrame(i);
frames.add(ImmutablePair.of(parseImg(img), decoder.getDelay(i)));
}
// 下面是保存gif图
File save = new File("/tmp/out2.gif");
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
GifHelper.saveGif(frames, outputStream);
FileOutputStream out = new FileOutputStream(save);
out.write(outputStream.toByteArray());
out.flush();
out.close();
System.out.printf("渲染完成");
}
上图转换成功之后，输出如下
如果希望输出图片更像原图，可以修改上面的fontSize，比如上面用的是12，可以调整成8，6等值，根据实际情况进行选择
有的小伙伴可能会说了，动漫的gif图转换之后相似度还可以，那么真实人物图转换之后呢？
接下来我们借助开源项目 https://github.com/liuyueyi/quick-media 来迅速的实现一个gif图转换
下图来自网络，有兴趣的自己打开查看，就不贴上了😏） http://n.sinaimg.cn/sinacn/w390h219/20171231/0ac1-fyqefvw5238474.gif
@Test
public void testGif() throws Exception {
String img = "http://n.sinaimg.cn/sinacn/w390h219/20171231/0ac1-fyqefvw5238474.gif";
ImgPixelWrapper.build().setSourceImg(img)
.setBlockSize(7)
.setPixelType(PixelStyleEnum.CHAR_COLOR)
// 生成的gif图放大为原来的两倍
.setRate(2d)
// 支持设置字体
.setFontStyle(Font.BOLD)
// 这里设置生成字符图中的字符集
.setChars("灰")
.build()
.asFile(prefix + "/out3.gif");
System.out.println("--------");
}
最后提个小问题，gif图都能生成字符图了，那么视频也可以生成字符视频么？
211116-Java实现图片转字符图片示例demo
前面介绍了一篇java实现图片灰度化处理的小demo，接下来再介绍一个有意思的东西，将一个图片转换成字符图片
借助前面图片灰度化处理的知识点，若我们希望将一张图片转成字符图片，同样可以遍历每个像素点，然后将像素点由具体的字符来替换，从而实现字符化处理
基于上面这个思路，具体的实现就很清晰了
@Test
public void testRender() throws IOException {
String file = "http://i0.download.fd.52shubiao.com/t_960x600/g1/M00/10/17/oYYBAFWvR5-IeXHuAAd5kPb8eSgAACm0QF50xIAB3mo414.jpg";
// 从网络上下载图片
BufferedImage img = ImageIO.read(FileReadUtil.getStreamByFileName(file));
int w = img.getWidth(), h = img.getHeight();
// 创建新的字符图片画板
BufferedImage gray = new BufferedImage(w, h, img.getType());
Graphics2D g2d = gray.createGraphics();
g2d.setColor(null);
g2d.fillRect(0, 0, w, h);
Font font = new Font("宋体", Font.BOLD, 1);
g2d.setFont(font);
for (int x = 0; x < w; x ++) {
for (int y = 0; y < h; y ++) {
g2d.setColor(ColorUtil.int2color(img.getRGB(x, y)));
g2d.drawString("灰", x, y);
}
}
g2d.dispose();
System.out.printf("渲染完成");
}
注意上面的实现，在会字符的时候，先取出源像素点的色彩，然后重新设置给g2d，这个int转color也比较简单，实现如下
public static Color int2color(int color) {
int a = (0xff000000 & color) >>> 24;
int r = (0x00ff0000 & color) >> 16;
int g = (0x0000ff00 & color) >> 8;
int b = (0x000000ff & color);
return new Color(r, g, b, a);
}
这样就实现了一个基础版的转字符图了，实际跑一下看看效果
这下尴尬了，输出的并不是我们预期的字符图，那么问题出在哪呢？
仔细看上面的文字大小为1，文字太小，导致即使是有字符组件的图，最终肉眼看起来和原图也没啥区别
那么我们就试一下将这个文字搞大点，将n*n个像素点作为一个文字渲染区域，这样我们需要调整一下遍历的步长；其次就是这个区域的颜色怎么定
- 直接取均值
/**
* 求取多个颜色的平均值
*
* @return
*/
Color getAverage(BufferedImage image, int x, int y, int w, int h) {
int red = 0;
int green = 0;
int blue = 0;
int size = 0;
for (int i = y; (i < h + y) && (i < image.getHeight()); i++) {
for (int j = x; (j < w + x) && (j < image.getWidth()); j++) {
int color = image.getRGB(j, i);
red += ((color & 0xff0000) >> 16);
green += ((color & 0xff00) >> 8);
blue += (color & 0x0000ff);
++size;
}
}
red = Math.round(red / (float) size);
green = Math.round(green / (float) size);
blue = Math.round(blue / (float) size);
return new Color(red, green, blue);
}
另外的就是改一下遍历的步长
@Test
public void testRender() throws IOException {
String file = "http://i0.download.fd.52shubiao.com/t_960x600/g1/M00/10/17/oYYBAFWvR5-IeXHuAAd5kPb8eSgAACm0QF50xIAB3mo414.jpg";
// 从网络上下载图片
BufferedImage img = ImageIO.read(FileReadUtil.getStreamByFileName(file));
int w = img.getWidth(), h = img.getHeight();
// 创建新的灰度图片画板
BufferedImage gray = new BufferedImage(w, h, img.getType());
Graphics2D g2d = gray.createGraphics();
g2d.setColor(null);
g2d.fillRect(0, 0, w, h);
int size = 12;
Font font = new Font("宋体", Font.BOLD, size);
g2d.setFont(font);
for (int x = 0; x < w; x += size) {
for (int y = 0; y < h; y += size) {
Color avgColor = getAverage(img, x, y, size, size);
g2d.setColor(avgColor);
g2d.drawString("灰", x, y);
}
}
g2d.dispose();
System.out.printf("渲染完成");
}
再次执行之后结果如下，实现了我们的预期效果
最后再介绍一个更好用的姿势，直接使用开源项目 https://github.com/liuyueyi/quick-media 来实现图片字符画
使用这个项目的 image-plugins 之后，生成一个灰度图就很简单了
public void testCharImg() throws IOException {
String img = "http://hbimg.b0.upaiyun.com/2b79e7e15883d8f8bbae0b1d1efd6cf2c0c1ed1b10753-cusHEA_fw236";
BufferedImage out = ImgPixelWrapper.build().setSourceImg(img).setBlockSize(2)
.setPixelType(PixelStyleEnum.CHAR_COLOR)
.setChars("小灰灰blog")
.build()
.asBufferedImg();
System.out.println(out);
}
注意这个ImgPixelWrapper封装类，处理基础的字符处理之外，还支持生成灰度图，gif图转字符动画，图片像素化（如马赛克…）
至于quick-media这个项目就更有意思了，java侧若想生成酷炫的二维码，选择它绝对不会让你失望；有兴趣的小伙伴可以瞅一瞅
211112-Java实现图片灰度化
本文通过一个简单的实例，演示如何使用java来实现图片灰度化处理，主要借助下面两种策略来处理颜色
灰度化公式
avgColor = red * 0.299f + green * 0.587f + blue * 0.114f
均值方式
avgColor = (red + green + blue) / 3.0f
基于上面两种方式，我们要实现一个图片灰度化的处理，无非就是获取图片的每个像素点的颜色，然后计算avgColor，再用新的颜色填充即可
一个基础的实现演示如下
private Color avg1(int red, int green, int blue) {
int avg = Math.round((red * 0.299f + green * 0.587f + blue * 0.114f));
return new Color(avg, avg, avg);
}
private Color avg2(int red, int green, int blue) {
int avg = Math.round((red + green + blue) / 3);
return new Color(avg, avg, avg);
}
@Test
public void testRender() throws IOException {
String file = "http://i0.download.fd.52shubiao.com/t_960x600/g1/M00/10/17/oYYBAFWvR5-IeXHuAAd5kPb8eSgAACm0QF50xIAB3mo414.jpg";
// 从网络上下载图片
BufferedImage img = ImageIO.read(FileReadUtil.getStreamByFileName(file));
int w = img.getWidth(), h = img.getHeight();
// 创建新的灰度图片画板
BufferedImage gray = new BufferedImage(w, h, img.getType());
Graphics2D g2d = gray.createGraphics();
g2d.setColor(null);
g2d.fillRect(0, 0, w, h);
for (int x = 0; x < w; x++) {
for (int y = 0; y<h; y++) {
// 针对像素点的颜色灰度化之后，重新绘制
int color = img.getRGB(x, y);
Color grayColor = avg1((color & 0xff0000) >> 16, (color & 0xff00) >> 8, color & 0x0000ff);
g2d.setColor(grayColor);
g2d.fillRect(x, y, 1, 1);
}
}
g2d.dispose();
System.out.printf("渲染完成");
}
生成原图与灰度图的对比如下
注意上面的实现，其中加载网络图片的具体实现，之前的博文有介绍，有兴趣的小伙伴可以参考: 封装一个根据路径获取文件资源的工具类
此外介绍一个更好用的姿势，直接使用开源项目 https://github.com/liuyueyi/quick-media 来实现灰度处理
使用这个项目的 image-plugins 之后，生成一个灰度图就很简单了
@Test
public void testImgGrayAlg() {
String img = "https://c-ssl.duitang.com/uploads/item/201809/16/20180916175034_Gr2hk.thumb.1000_0.jpeg";
BufferedImage out = ImgPixelWrapper.build()
.setSourceImg(img)
.setPixelType(PixelStyleEnum.GRAY_ALG)
.build()
.asBufferedImg();
System.out.println(out);
}
注意这个ImgPixelWrapper封装类，处理基础的灰度处理之外，还支持生成字符图，图片像素化（如马赛克…）
至于quick-media这个项目就更有意思了，java侧若想生成酷炫的二维码，选择它绝对不会让你失望；有兴趣的小伙伴可以瞅一瞅