将图片转为Html网页

作者 Hstb 日期 2017-04-16
将图片转为Html网页

** 前段时间在知乎上看到了这样一个神奇的东西,于是自己也动手试了一波 **

和那位Python大触不一样的是,我用的是易语言,不过原理应该都一样的。

最开始想的是, ** 把每个像素点的颜色给识别出来,然后转成HTML代码去显示。 **

于是乎,第一个问题就来了,** 怎么识别颜色, **


百度一番后,用了位图操作支持库,

因为取像素点前需要转换图片格式为bmp,所以还借助了类似库存在的模块。

然后取图片高度和宽度,配上两个循环(在高度里循环宽度),用来取像素点的坐标,

不过没想到的是像素点坐标可以为(0,0)

最开始的时候没搞清楚高度和宽度这两者谁循环谁,
以至于宽度大的图片显示成高度大的样子,
至于高度大的图片,我想我不必说了。


然后就是在循环中输出HTML代码了,我是照搬知乎那位的样式,另外加了粗体效果(后面加的)。

有个很费劲的问题就是,如果用<a>标签,那会显示成一片黑。

可是输出后的显示效果还是有点窄,于是在将输出的字符变为两个,看上去终于好多了,


因为最开始用的是400*400的小图,所以我一直都没注意一些坑爹的问题。

首先,随着图像尺寸的增大,处理时间也跟着延长,(虽然也可能是易语言的锅)

举个例子,如果处理的图像为1980x1200这样的壁纸,那么处理的时间可以超过10分钟,

排查一番后,找到问题所在,(的确是易语言的锅)

我是用文本变量拼接完所有颜色的HTML代码再输出,
但一个像素点的颜色转为HTML代码,所输出的代码长度已经接近20个字符,
所以当图片稍大时,总的代码长度可以不夸张的说能达到接近百万
而当文本长度高达几万的时候,易语言处理文本变量的效率已经立竿见影

  • 于是改成操作文件,边输出边写入,大概需处理5s。

另一个问题就是HTML显示出的效果是原图的好几倍大小,光400*400的就可以快占满屏幕,(虽然也有可能是因为分辨率小,屏幕小之类的原因)
我试过处理过一个2880 x 1800的图像,输出的代码文本大小可以达到101.3MB,电脑加载一会儿就内存不足boom了,用手机也只能显示一半,最后闪退了。

这真是个梗呢,试了很多方法


  • 取色相,(大概就是每几个像素点所呈现的颜色)

先弄成2x2,3x3,4x4的色块,然后取平均值,
结果发现某些尺寸的图下会出现颜色错乱问题,也就是说那块取出的色相炸了。

如果是取出现次数最多的颜色,
那么结局还是和上面一样爆炸,不过稍微好一点而已。

中途还发现模块的颜色值转16进制算反了,也是有点迷醉。
百度了下颜色值的算法,因为嫌代码长,又怕出现问题所以还是搬了一波:

色值_字节集 = 到字节集 (颜色值)
R = 色值_字节集 [1]
G = 色值_字节集 [2]
B = 色值_字节集 [3]

既然取色相这方法走不通,(也许是水平不到家),那换一种:


  • 更改样式

一直感觉图片有些地方黑的太多,特别是处理一张白图后
仔细看了下知乎大触的HTML的CSS代码,自己魔改了一波,似乎好了一点,字符也紧凑了一点

** 前面用的图看上去会紧凑,是因为原来的代码丢失了,所以找了张后来的效果截图贴上 **

为了防止被打,所以这里要换一张贴上:

是不是和原图很接近?

如果是,请收下这只滑稽

还有后面的代码

body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    line-height: 6px;
    letter-spacing: 0px;
    font-size: 0.1%;
    //background-color: #000000;
    font-family: monospace;
}
  • 在更改样式的基础上,又加了缩放图片的处理,

模块里找不到相关的函数,只好继续百度。

虽然最后用的函数有一点慢,

  • (实际上有两个缩放,一个是快速,速度接近画图软件的操作,一个是无损,但是为了质量嘛,)

但是总比输出个几百MB的文件好。


虽然我讲了很多,不过我不打算放源码,而是放成品

效果图如下(上部分为原图)

最后,想送个超大的滑稽

下载


  • 直接访问?
img2html.exe