一键转贴Chrome扩展开发经验总结5:网页图片资源的提取-出家如初,成佛有余

一键转贴Chrome扩展开发经验总结5:网页图片资源的提取

技术 admin 123浏览 0评论

前面几篇关于一键转贴技术实现的文章 总结了 需求 架构怎样判断任意链接是否为图片类型网页内容预处理 ,终于进入正题:网页媒体资源的提取(目前只局限于图片资源,但类似思路可以应用于视频、音频文件)。

一、网页内容图片资源提取技术方案

要从网页内容中提取出图片资源,主要的技术路线分为两种:

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、对提取图片的转换、处理

这些内容后续再描述。

转载请注明:出家如初,成佛有余 » 一键转贴Chrome扩展开发经验总结5:网页图片资源的提取

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址