要将网页中的图片保存在电脑中,该如何操作(如何保存网页图文到单个文件 过滤
要将网页中的图片保存在电脑中,该如何操作(如何保存网页图文到单个文件 过滤头尾广告)
网页可以非常方便的为我们展示各种信息,如果遇到重要的资料文献,希望在本地电脑上保存下来该怎么操作呢?把网址添加到收藏夹,下次直接打开网址查看,但如果资源被网站删除,就再也找不到了。还是保存在自己电脑里比较放心,那就使用浏览器的保存网页吧,如果保存为单个文件,则只有文字内容,图片丢失了。如果保存所有内容,将产生一个网页文件和一个资源文件夹,包括图片在内的文件都保存在这个文件夹中,由于文件较多不容易归类保存和传输。使用保存网页的方式,除正文外,还会保存网页标题导航栏、信息侧边栏、底部联系信息等无用的内容。
需要保存的网页标题和正文
有没有一种方法,保存网页时,自动智能识别内容标题和正文,且仅保存标题和包括图片在内的正文内容,自动删除网页无效的头尾和侧边内容,更要过滤网页上的广告。这就是“AI保存网页“,如下图所示,打开任意新闻、公告或文章页面,再点击”AI保存网页“,就可以一键保存网页标题和正文。
网页保存后与原页面对比
找到文档保存路径,可以看到以文章标题命名的网页文件。这个文档比较大,是因为同时保存和正文中的图片,也就是说把文字和图片都保存在单个文档中的。且为htm网页格式,可以使用任意浏览器打开。把图片保存在htm网页代码中,是什么原理呢?原来木头浏览器在保存网页时,自动把网页上的图片转换成Base64编码,这样就可以在单个文件中保存图片了。
图片和文字内容保存在一个网页文件中
那么是怎样智能识别文章标题和正文的呢?有js基础的小伙伴可以继续往下看。
首先在项目管理器中,创建一个脚本代码步骤,通过执行一段js脚本代码找出文章标题。首先获取网页头部的title标签作为标题,其次是查找H1元素内容作为标题,如果还是找不到,则查找样式为title的元素内容作为标题。
智能识别网页标题
vartitle="";try{ title=document.title;//取网页标题}catch{}if(title==""){//网页标题为空时,查找H1元素内容作为标题varh1s=document.getElementsByTagName("h1");if(h1s.length>0) { title=h1s[0].innerText; } }if(title==""){//仍未找到标题时,查找样式为title的元素内容作为标题varh1s=document.getElementsByClassName("title");if(h1s.length>0) { title=h1s[0].innerText; } } title;
再创建一个脚本代码步骤,定义几个重复使用的函数。
function
generateFullXPath
(el
){let
query =""
while
(el && el.nodeType === Node.ELEMENT_NODE) {// 也可以使用nodeName,nodeName包含了tagName
let
component = el.tagName.toLowerCase()let
index =this
.getElementIndex(el)if
(index >=1
) {
component +='['
+ index +']'
}
query ='/'
+ component + query
el = el.parentNode
}return
query
}function
getElementIndex
(el
){let
index =1
let
sib = el.previousSiblingwhile
(sib) {if
(sib.nodeType === Node.ELEMENT_NODE &&this
.compareTagNameEqual(el, sib)) {
index++
}
sib = sib.previousSibling
}if
(index >1
)return
index
sib = el.nextSiblingwhile
(sib) {if
(sib.nodeType === Node.ELEMENT_NODE &&this
.compareTagNameEqual(el, sib)) {return
1
}
sib = sib.nextSibling
}return
0
;
};/**
* 查看两个元素节点名称是否相同
*/
function
compareTagNameEqual
(primaryEl, siblingEl
){let
p = primaryEl, s = siblingEl// return (p.tagName === s.tagName && (!p.id || p.id === s.id));
return
(p.tagName === s.tagName)
};
同样使用js代码智能识别查找正文元素,一般文章正文部分由多个段落组成,所以我们从P元素入手,找到子元素包含大量P元素的元素,就是正文元素了。如果没有P元素,则获取页面中间位置,面积较大的元素作为正文元素,并给正文元素设置一个id值”mutoubrowser”作为标记。方便后续步骤调用。
智能识别网页正文
varcontent="";varfa=null;varps=document.getElementsByTagName("p");if(ps.length>0) {//取包含P的父元素fa=ps[0].parentElement;while(fa.parentElement.scrollWidth*fa.parentElement.scrollHeight>fa.scrollWidth*fa.scrollHeight) { fa=fa.parentElement; }if(ps.length>1) {//找到第一个p和最后一个p的共同父元素do{varendfa=ps[ps.length-1].parentElement;varfaxpath=generateFullXPath(fa);varendfaxpath=generateFullXPath(endfa);if(faxpath.indexOf(endfaxpath)==0) {fa=endfa;break; }elseif(endfaxpath.indexOf(faxpath)==0) {break; }else{ fa=fa.parentElement; endfa=endfa.parentElement; } }while(true); } }else{//取页面中间最大的元素varw=document.body.clientWidth;varh=document.body.clientHeight;varel=document.elementsFromPoint(Math.round(w/2),Math.round(h/3*2));if(el!=null){vard=0;for(vari=0;i<el.length;i++){ vare=el[i];vardd=e.scrollWidth*e.scrollHeight;if(dd>d*1.8) { fa=e; } d=dd; } }else{ fa=el.document.body; } }if(fa!=null) { fa.setAttribute("id","mutoubrowser"); content=fa.innerHTML; } content;
再创建一个保存内容步骤,勾选“保存网页内容”,选择“下载图文单个文件”。设置文件名为js变量title,即标题做为文件名,并指定保存文件路径为“D:\文档”。在窗口下方设置正文的元素,通过js代码获得。
保存图文到文件
document.getElementById("mutoubrowser");
最后保存项目文件为“AI保存网页”,通过点击书签按钮运行这个项目,就能智能识别网页标题和正文,保存网页有效内容和图片了。
-
- 钗和簪的区别是什么(步摇、钗、簪、钿、笄……终于搞懂古代女子的头饰的区别
-
2023-12-25 20:53:55
-
- 肝炎可以治疗吗 肝炎,并不可怕,真正可怕的是
-
2023-12-25 20:51:40
-
- 粗心怎么办(改掉“粗心”毛病的多种方法)
-
2023-12-25 20:49:25
-
- 紫藤花怎么种植?记住“三剪三不缺”,年年春季开爆盆
-
2023-12-25 20:47:10
-
- 怎样选床垫最好(睡货大赏:床垫选购9大要点,比试躺更重要)
-
2023-12-25 20:44:56
-
- 学唱歌怎么入门?小白也能看懂的入门级唱歌技巧和步骤
-
2023-12-25 20:42:41
-
- 体育运动的好处 如果坚持运动,恭喜你,能收获4个好处
-
2023-12-25 20:40:26
-
- 如何感恩 教孩子学会感恩十大技巧
-
2023-12-25 20:37:25
-
- 立秋节气吃什么食物(这7种食物要多吃)
-
2023-12-25 20:35:10
-
- 纺织娘是什么昆虫怎么叫的(乡村夜晚农田里,五种虫儿发出不绝于耳的鸣声,有你
-
2023-12-25 20:32:55
-
- 食补钙 别再喝牛奶了!这19种补钙食品让你轻松补钙还吃不胖
-
2023-12-25 20:30:40
-
- 人力资源管理做什么工作(你真的知道人力资源管理在做什么工作吗?想当HR不能
-
2023-12-25 20:28:26
-
- 吃什么补肝养肝有效?(春天吃这七种蔬菜最养肝!关键是便宜,你一定别错过)
-
2023-12-25 20:26:11
-
- 菊花的作用 中医专家跟大家聊聊菊花 清肝明目,益寿延年
-
2023-12-25 20:23:56
-
- 恩施在哪里属于哪个省(明明是在湖北省,却一点也不“湖北”:重庆味道的湖北恩
-
2023-12-25 20:21:41
-
- 清洁能源包括哪些(什么是清洁能源?清洁能源有哪些?)
-
2023-12-25 20:19:27
-
- 新手怎么写小说?6个步骤,教你把灵感扩展成完整的小说
-
2023-12-25 20:17:12
-
- 煤炭和焦炭有什么,常被人混淆,它们之间存在什么关系?
-
2023-12-25 08:58:04
-
- 父亲节的礼物 父亲节丨父亲节,请送他这三样“礼物”
-
2023-12-25 08:55:49
-
- 拉稀的原因 人为什么会腹泻,如何判定腹泻的类型?
-
2023-12-25 08:53:34