一键转贴最核心的任务是对图片资源文件的处理,包括页面图片提取、图片元信息获取、普通图片类型互转、WEBP类型处理(例如WEBP动图转为GIF)、网页图片链接爬虫。
但在开始对图片资源处理前,首先面临一个问题:怎样较好地把网页内容提取出来?也即在对图片资源文件处理前,需要对网页内容进行进行预处理。网页内容预处理工作未做好,会对后续图片资源文件的处理会带来诸多麻烦。
1、网页内容提取典型需求场景:
1、用户鼠标选择了部分网页内容,只针对此部分的内容进行预处理
2、用户未选择任何内容,需要把网页内容主体提取出来
第一个需求场景貌似简单,只需要使用window.getSelection和selection.getRangeAt 就可以获取用户选取的内容。但在实际处理时,面临一个典型问题:如果选择内容中包含了WEBP类型的图片,怎样处理?
由于并非所有浏览器都支持WEBP图片,因此按照WEBP协议,浏览器在请求时候,可以在HTTP Header的Accept字段中协商是否支持。Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 。
如果没有明确指明支持image/webp,则服务器端会返回image/webp类型对应的image/gif、image/png、image/jpeg类型的图片。
因此在第二种场景中,可以通过XMLHTTPREQUEST 发起ajax请求,Header Accept字段指明支持的mime类型,则可以获取实际的图片类型,不需要对WEBP类型的图片做特别处理。
var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.setRequestHeader("Accept", "text/html,application/xhtml+xml,application/xml;q=0.9, image/png, image/jpeg, image/gif, image/svg+xml, image/bitmap,*/*;q=0.8,application/signed-exchange;v=b3"); xhr.setRequestHeader("Upgrade-Insecure-Requests", 1); xhr.onload = function (e) { if (xhr.status == 200) { } else { } }; xhr.onerror = function (err) { }; xhr.send();
这也是直接手工修改WEBP URL链接地址,将对应的的.webp后缀修改为类似.jpg、.png、.gif,可以得到非WEBP格式图片的原理。
而在第一种需求场景中,由于用户只选取了页面部分内容,无法通过与服务器协商方式获取非WEBP类型的图片。
一种方案是保存下用户选择的范围(getRangeAt),然后重新以不支持image/webp的请求整个页面,然后根据保存的范围重新获取响应区间的内容。由于支不支持image/webp返回的网页内容并非完全相同,此种方案并不准确。而且如果用户是直接单独打开了WEBP图片,对大部分服务器,协商直接请求图片地址,还是返回webp格式的图片。
总结一下:第一种需求场景,在图片资源处理逻辑上与第二种不同。
但如果只局限在网页内容预处理上,需求场景1和需求场景2逻辑基本上相同。
2、网页内容预处理主要任务
1)、提取网页主体内容
由于大部分的网页都包含了广告、导航栏等无关内容,如果只是直接通过window.document.body获取内容,则会包含大量的冗余信息(例如各种无价值链接),还需要用户在可视化编辑器中手工编辑删除,体验不好。
提取网页主体内容,专有术语叫readability,Pocket、Instapaper这样的服务都使用了此技术。
大部分开源 readability 项目,都是基于 arc90labs-readability – Readability cleans up hard-to-read articles on the Web
一些开源移植版本:
- JS版本:https://github.com/mozilla/readability
- java版本:https://github.com/karussell/snacktory
- php 版本:https://github.com/feelinglucky/php-readability
- Python版本:https://github.com/timbertson/python-readability
- nodejs版本:https://github.com/luin/readability
- Swift版本:https://github.com/exyte/ReadabilityKit
- Ruby版本:https://github.com/cantino/ruby-readability
2)、预处理图片资源链接
典型需求场景为:目前很多网站都使用了图片惰性加载技术(lazy loading),在装载时候 img 标签中src一般为占位图片,实际图片链接在data-src中。装载完成后(例如用户鼠标滚动到相应位置后),src值才设置为实际图片链接地址。
如果不做预处理,直接提取图片资源文件,会只提取出占位图片。
3、图片链接相对路径补齐为绝对路径
由于在网页内容中,图片链接地址既有相对路径、也有绝对路径的,需要都预先处理为绝对路径。
2、3 两项任务可以放到readability中。
转载请注明:虚拟号之家 » 一键转贴Chrome扩展开发经验总结4:网页内容预处理