有趣的Python小案例：Python 将图片转化为 HTML 页面

迎点击右上角关注小编，除了分享技术文章之外还有很多福利，私信学习资料可以领取包括不限于Python实战演练、PDF电子文档、面试集锦、学习资料等。

前言

将图片的每个像素用文字代替，最后生成一个HTML文档，在浏览器中可以显示出图像，只不过图像全是由文字组成的。

实现这样的效果并不复杂，只不过是用标签代替像素而已，接下来我会演示如何用 PIL/Pillow 库去实现这样的效果。

PIL 图像处理库

PIL（Python Imaging Library）是 Python 平台的图像处理标准库。不过 PIL 暂不支持 Python3，可以用 Pillow 代替，API是相同的。

安装 PIL 库

如果你安装了 pip 的话可以直接输入 pip install PIL 命令安装 Pillow。

或者在 PyCharm 中打开 [File] >> [settings] >> [project github] >> [project interpreter] 添加标准库：

PIL 使用方法

图片处理过程

图片转换成网页的过程，可以分成五个步骤。首先要选择一个合适的HTML模板，控制好字体的大小和字符间的间距。

然后通过 Python 的网络访问模块，根据URL获取图片。接着使用 PIL 模块载入二进制图片，将图片压缩到合适的尺寸。

遍历图片的每一个像素，得到该像素的颜色值，应用到HTML的标签上。最后把字符串信息输出到文件中，生成HTML文档。

定制模板

大括号代表一个占位符，最后会被替换成实际内容，双大括号中的内容则不会被替换。

获取图片

通过 URL 得到 byte 数组形式的图片。

from urllib import request
url = 'https://pic.cnblogs.com/avatar/875028/20160405220401.png'
binary = request.urlopen(url).read()

处理图片

byte 类型的图片需要通过 BytesIO 转换为 string 类型，才能被 PIL 处理。

from PIL import Image
from io import BytesIO
img = Image.open(BytesIO(binary))
img.thumbnail((100, 100)) # 图片压缩

生成HTML

使用<font>标签包裹文字，并根据相应像素的RGB值，设置<font>标签的color属性。

piexl = img.load() # 获取像素信息
width, height = img.size # 获取图像尺寸
body, word = '', '博客园'
font = '<font color="{color}">{word}</font>'
for y in range(height):
 for x in range(width):
 r, g, b = piexl[x, y] # 获取像素RGB值
 body += font.format(
 color='#{:02x}{:02x}{:02x}'.format(r, g, b),
 word=word[((y * width + x) % len(word))]
 )
 body += '\n<br />\n'

导出网页

向HTML模板中填充处理完成的数据，使用文件流将字符串以utf8格式输出到文档。

html = TEMPLATE.format(title=word, body=body)
fo = open('index.html', 'w', encoding='utf8')
fo.write(html)
fo.close()

img2html

wo把上面五个步骤封装了起来，这样一来就可以很方便的调用了。

from io import BytesIO
from PIL import Image
from PIL import ImageFilter
from urllib import request
TEMPLATE = '''
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>{title}</title>
 <style>
 body {{
 line-height: 1em;
 letter-spacing: 0;
 font-size: 0.6rem;
 background: black;
 text-align: center;
 min-width: {size}em;
 }}
 </style>
</head>
<body>
 {body}
</body>
</html>
'''
class Converter(object):
 def __init__(self, word='田', size=100):
 self.word, self.size = word, size
 self.font = '<font color="{color}">{word}</font>'
 # 读取url内容
 def __network(self, url):
 return request.urlopen(url).read()
 # 处理图片信息
 def __handle(self, binary):
 img = Image.open(BytesIO(binary)) # 打开制图片
 img.thumbnail((self.size, self.size)) # 压缩图片
 img.filter(ImageFilter.DETAIL) # 图片增强
 return img
 # 分析图片像素
 def __analysis(self, img):
 body = ''
 piexls = img.load()
 width, height = img.size
 for y in range(height):
 for x in range(width):
 r, g, b = piexls[x, y]
 body += self.font.format(
 color='#{:02x}{:02x}{:02x}'.format(r, g, b),
 word=self.word[((y * width + x) % len(self.word))]
 )
 body += '\n<br />\n'
 return body
 # 写入文件内容
 def __writefile(self, file, str):
 fo = open(file, 'w', encoding='utf8')
 try:
 fo.write(str)
 except IOError:
 raise Exception
 finally:
 fo.close()
 # 生成html文档
 def buildDOC(self, url, output):
 try:
 binary = self.__network(url)
 img = self.__handle(binary)
 html = TEMPLATE.format(
 title=self.word,
 body=self.__analysis(img),
 size=self.size
 ) # 向模板中填充数据
 self.__writefile(output, html)
 except Exception as err:
 print('Error:', err)
 return False
 else:
 print('Successful!')
 return True

导入 img2html.Converter，调用 buildDOC(url, out) 方法

程序会在当前目录生成 index.html 文件，需要用浏览器打开后才可以看到效果。

from img2html import Converter
conv = Converter('卷福', 120)
url = 'http://www.sznews.com/ent/images/attachement/jpg/site3/20140215/001e4f9d7bf91469078115.jpg'
out = 'index.html'
conv.buildDOC(url, out)

转换效果

维网和其它网络类型最大的区别就是它在网页上可呈现丰富多彩的色彩和图像，还可以播放音频、视频，及把图像作为链接使用。

一、图片格式

网络上流行的图片格式主要有jpg、jpeg、png、gif等，以下是这几种格式的介绍。

1、gif格式

gif采用LZW压缩，是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的损失，且压缩率高，支持动画效果，很适合互联网平台，但是它只支持256种颜色。

2、jpg或jpeg格式

以JPEG有损压缩图片，通常用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成损失，这部分损失不影响图片显示，一般人眼是看不出来差异的。损失数据越多，图片就越不清晰。

3、png格式

png是一种非破坏性的网页图像文件格式，它以最小的方式压缩图片且不造成图片数据损失。它不仅支持像gif大部分优点，还支持48 bit的色彩，跨平台的图像亮度控制，更多层的透明度设置。

二、使用图片

网页中通过<img>标签插入图片，语法如下：

<img src="图片路径" alt="替换文本" />

具体示例：

<!DOCTYPE HTML>
<html>
<body>
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>

效果如下：

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像宽度和高度属性

如下代码，在网页中插入一个宽度和高度都是300像素的图片。

<img src="/i/ct_netscape.jpg" width="300px" height="300px" />

图片超链接

如下代码，在网页中对一个图片进行超链接设置，点击这张图片就会跳转到其它页面。

<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>

创建图像热区链接

除了对整个图片进行超链接设置外，还可以将图像划分成不同区域进行链接设置，比如一张地图中给每个省份图形进行超链接。

图像热区链接，使用usemap 属性通过#name指定到名叫name的map元素上，map定义了每个热区点击区域形状、大小、坐标等。
area标签的 shape 属性有三种，rect 方形，circle 圆形，poly 多边形。coords 属性定义坐标点位置，相对于图片左上角位置。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>

效果可参考 https://www.w3cschool.cn/html5/html5-img.html 这里。

可以看到鼠标在图片上点击小行星会打开对应的图片。

到此网页中使用图片已经大体介绍了，自己亲手写下，会加深印象，感谢关注。

上篇：前端入门——html 超链接

下篇：前端入门——html 如何在网页中使用视频音频

个过程用到了画布(canvas)来帮忙完成

过程: 选择图片文件 > 准备画布 > 按需压缩图片并绘制在画布上 > 生成Base64 > 完成.

先上效果图

详细过程如下:

准备一个简洁的HTML文件, 代码如下

用一个file dom来选择图片文件

<!DOCTYPE html>
<html lang="zh-CN">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <body>
        <input name="file" id="thumbnail" type="file" onchange="previewPic(this)"
            accept="image/x-png, image/jpg, image/jpeg, image/gif" />
    </body>
</html>

为了方便后面的代码操作, 引用了JQuery

然后准备2个容器, 一个放预览图; 另一个放Base64内容

<div>下面这个Div用来预览图片</div>
<div id="showpic" style="padding:7px;"></div>

<div>下面这个Div用来存放Base64内容</div>
<div id="picb64"></div>

接下来是灵魂:JS代码

            function previewPic(tis) {
                var fileObj = tis.files[0];         //获取图片文件对象
                if (undefined == fileObj) { console.log("未选择待上传的文件"); return; }
                var picid = "imgComp";
                $("<img>", {
                    id: picid,
                }).appendTo($("#showpic"));         //先生成IMG的DOM,以防顺序乱掉
                genCompPic(picid, fileObj);
            }
            function genCompPic(picid, fileObj) {
                var ready = new FileReader();
                /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
                ready.readAsDataURL(fileObj);
                ready.onload = function () {
                    canvasDataURL(this.result, { width: 200 }, function (base64Codes) {
                        $("#"+ picid).attr("src", base64Codes); //在IMG DOM中显示图片预览
                        $("#picb64").html(base64Codes);         //得到Base64结果,填充到Div中显示
                    })
                }
            }
            //利用canvas生成压缩后的图片
            function canvasDataURL(path, obj, callback) {
                var img = new Image();
                img.src = path;
                img.onload = function () {
                    var w = obj.width;
                    var h = obj.width / (this.width/ this.height);  //按比例压缩,计算出等比例高
                    var canvas = document.createElement('canvas');  //生成canvas
                    var ctx = canvas.getContext('2d');
                    // 创建属性节点
                    var anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    var anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);       //设置图片宽
                    canvas.setAttributeNode(anh);       //设置图片高
                    ctx.drawImage(this, 0, 0, w, h);    //绘制图片
                    var quality = 1;  // 图片质量为0.1~1, quality值越小，所绘制出的图像越模糊
                    var base64 = canvas.toDataURL('image/jpeg', quality);   //利用canvas生成Base64
                    callback(base64);                   // 回调函数返回base64的值
                }
            }

虽然有点长, 不过关键位置都写上注释了, 大家可以参考使用

如果不想压缩图片, 在canvasDataURL方法里可以把设置宽和高的代码换成原图参数即可

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <style>
        #picb64{width: 95%;height: 300px;overflow-wrap: break-word;overflow: auto;margin: auto;background-color: #676767;border-radius: 10px;}
    </style>
    <body>
        <input name="file" id="thumbnail" type="file" onchange="previewPic(this)"
            accept="image/x-png, image/jpg, image/jpeg, image/gif" />

        <div>下面这个Div用来预览图片</div>
        <div id="showpic" style="padding:7px;"></div>
        <div>下面这个Div用来存放Base64内容</div>
        <div id="picb64"></div>

        <script>
            function previewPic(tis) {
                var fileObj = tis.files[0];         //获取图片文件对象
                if (undefined == fileObj) { console.log("未选择待上传的文件"); return; }
                var picid = "imgComp";
                $("<img>", {
                    id: picid,
                }).appendTo($("#showpic"));         //先生成IMG的DOM,以防顺序乱掉
                genCompPic(picid, fileObj);
            }
            function genCompPic(picid, fileObj) {
                var ready = new FileReader();
                /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
                ready.readAsDataURL(fileObj);
                ready.onload = function () {
                    canvasDataURL(this.result, { width: 200 }, function (base64Codes) {
                        $("#"+ picid).attr("src", base64Codes); //在IMG DOM中显示图片预览
                        $("#picb64").html(base64Codes);         //得到Base64结果,填充到Div中显示
                    })
                }
            }
            //利用canvas生成压缩后的图片
            function canvasDataURL(path, obj, callback) {
                var img = new Image();
                img.src = path;
                img.onload = function () {
                    var w = obj.width;
                    var h = obj.width / (this.width/ this.height);  //按比例压缩,计算出等比例高
                    var canvas = document.createElement('canvas');  //生成canvas
                    var ctx = canvas.getContext('2d');
                    // 创建属性节点
                    var anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    var anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);       //设置图片宽
                    canvas.setAttributeNode(anh);       //设置图片高
                    ctx.drawImage(this, 0, 0, w, h);    //绘制图片
                    var quality = 0.8;  // 图片质量为0.1~1, quality值越小，所绘制出的图像越模糊
                    var base64 = canvas.toDataURL('image/jpeg', quality);   //利用canvas生成Base64
                    callback(base64);                   // 回调函数返回base64的值
                }
            }
        </script>
    </body>
</html>

扩展应用: 可以利用压缩后再上传来节省带宽

本期分享就酱紫, 下期再见[看]

复杂的问题简单化
每次只关注一个知识点
对技术有兴趣的小伙伴可以关注我, 以后会经常分享各种奇奇怪怪又实用的技术知识

在线咨询

上一篇：ruby标签从入门到应用
下一篇：JavaScript HTML DOM-改变 HTML

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商