前面几篇关于一键转贴技术实现的文章 总结了 需求 、架构 、怎样判断任意链接是否为图片类型 、网页内容预处理 ，终于进入正题：网页媒体资源的提取（目前只局限于图片资源，但类似思路可以应用于视频、音频文件）。
一、网页内容图片资源提取技术方案
要从网页内容中提取出图片资源，主要的技术路线分为两种：
1、使用正则表达式匹配网页内容
由于正则表达式是所有程序员开发入门的基础课，因此正则表达式基本上是大部分程序员的第一版斧。
此种方案优点是入门门槛低，只要拿到网页内容，就可以进行解析提取。
缺点：
a、不具有通用性。正则表达式需要针对每一个网站做适配，工作量巨大。而且由于网站经常改版，稍微已调整就会导致脚本必须调整。
b、只能静态提取内容，对一些动态内容无能为力，例如JavaScript动态装载、惰性装载lazy loading、无限翻页（infinite paging）
2、基于DOM的方案
主要通过DOM操作，采用XPATH、querySelector、querySelectorAll等对DOM树进行操作。
优点：具有通用性，处理灵活，可以充分利用浏览器Javascript引擎已有的各个功能，也可以利用jQuery等丰富的函数库。尤其还涉及后续更多内容爬取、图片类型转换（例如WebP转为jpg）等操作，采用此种方案优势明显。
因此采用此方案。
二、提取图片资源涉及的HTML标签元素
要提取网页内容的图片资源，最基本的问题：那些html 标签可能包含图片？
1、互联网常用的图片类型
JPG、PNG、GIF、WebP
其中WebP又分为 lossy，lossless，alpha，animation。其中animation通常包装gif文件。
其他类型，TTF、BMP等类型，主要用于某些特定场合，并不是常用的互联网图片类型，因此不考虑。
2、涉及图片的html 标签元素
img标签：
<img /> <img data-src="" /> 惰性装载lazy loading较常用，data-src非标准用法 <img srcset="" />
picture标签：
<picture> <source srcset="" /></picture> <picture><img src="" /></picture>
A标签：
<a href="index.jpg"> <a href=""><img src="" /></a> 形式可以归为<img />类型
link标签：
<link rel="" href="test.png" type="image/png"> <link rel="icon" href="">
iframe标签：
<iframe src="index.jpg" ></iframe> <iframe><img src=""></iframe>
input标签/button标签：
<input type="image" src="" >
<botton type="image" src="">
Computed Style
应用于某个element的活动样式表解析后的CSS值
window.getComputedStyle
SVG标签
<svg></svg>
<object data="circle.svg" type="image/svg+xml"></object>
<embed src="circle.svg" type="image/svg+xml">
<iframe src="circle.svg"></iframe>
<img src="circle.svg">
css
.logo {
background: url(icon.svg);
}
Canvas标签：
较少直接用于直接显示，主要通过drawImage动态画出来。
<canvas></canvas>
Object标签：
<object data="" type="image/png"></object>
Embed标签：
<embed src="" type="image/png">
3、图片形式
图片源文件
<img src="test.jpg"/>
Data URI
data:image/gif;base64,...
三、提取图片资源涉及的其他问题
1、惰性装载lazy loading
2、无限翻页infinite paging 的处理
3、对链接的进一步爬取（爬虫）
4、对提取图片的转换、处理
这些内容后续再描述。