将HTML中引用的image/css转为内嵌形式

Table of Contents

1 动机

2 代码

3 使用方法:

1 动机

Html作为一种文档格式其实还是比较好的，支持图片，超链接。
一般只要不使用过于复杂的JavaScript，兼容性也不成问题。
最主要的一点，有很多工具可以生成Html，比如asciidoc, txt2tags, emacs/org-mode.

但是如果Html引用了外部图片或css，则在拷贝html文档时要注意把图片也带上，不太方便。
解决这种问题有三种办法:

使用IE转为mht

使用acrobat转为pdf

使用data uri schema将图片嵌入html。

方法3如果可行，显然更好。在网上没找到相关工具，于是自己写了一个。

2 代码

#!/usr/bin/env python2
'''
Convert external referenced img/css to be inlined using data uri schema
snippet as:
<img src="a.png" alt="a.png"/>
will converted to:
<img src="data:image/png;base64,iVBORw0KGgoAAAA" alt="a.png"/>
Usage:
inline.py src-html to-html
'''
import sys
import os
import re

def read(path, mode='r'):
try:
with open(path, mode) as f:
return f.read()
except IOError:
return ''

def write(path, content):
with open(path, 'w') as f:
f.write(content)

def get_ext(name):
index = name.rfind('.')
if index == -1: return ""
return name[index+1:].lower()

def mime(url):
mime_types  = dict(png='image/png', svg='image/svg+xml', jpg='image/jpeg', jpeg='image/jpeg', css='text/css')
return mime_types.get(get_ext(url), 'image/unknown')

def multi_sub(pats, repl, content):
for p in pats:
content = re.sub(p, repl, content)
return content

def inline(content, base_dir='.'):
def data_uri(url):
print 'data_uri(%s)'%(repr(url))
content = read(os.path.join(base_dir, url), 'rb')
if not content:
return url
else:
return 'data:%s;base64,%s' %(mime(url), content.encode("base64").replace("\n", ""))
img_pat = '(<img\s+src\s*=\s*")(.*?)(".*?/>)'
css_pat = '(<link\s+rel="stylesheet"\s+type="text/css"\s+href=")(.*?)(".*?/>)'
return multi_sub([img_pat, css_pat], lambda m: '%s%s%s'%(m.group(1), data_uri(m.group(2)), m.group(3)), content)

if __name__ == '__main__':
if len(sys.argv) != 3:
print __doc__
sys.exit(1)
write(sys.argv[2], inline(read(sys.argv[1]), os.path.dirname(sys.argv[1])))

3 使用方法:

./inline.py src.html inlined.html