手把手教你利用JavaScript 获取任意网站图片链接

前言

大家好,我是IT共享者,人称皮皮。

妹纸图这个网站想必大家都非常熟悉了,老司机的天堂。小编第一次进表示身体逐渐变得空虚,表示一定要克制自己,远离这种正能量的网站。话不多说,今天带大家获取妹纸图上的图片链接。然后大家都懂得。

一、项目准备

360浏览器,仅此而已

二、项目目的

获取页面所有美女图片

三、项目步骤

1.打开浏览器,搜索图片,我们以美女图片为例:

画面太美,不忍直视。

2.打开浏览器控制台

F12,即可打开浏览器控制台,我们今天要做的是获取所有的图片链接,顺便查看下图片。如下图:

今天我们就是要在这里面获取到所有的图片链接,相信没接触过前端的人肯定对此一无所知,但是小编接下来讲过了之后你还是一无所知,那就是你的不对了。

3.控制台功能大揭秘

大家可能觉得这个地方没啥用处,啥都没有,还不如Element Network用处大;诚然前两者的确用处很大,可以用来分析网页结构和网页请求,但是我想说的是控制台的功能你永远不要小瞧了,因为它可以使你在开发过程中能快速的见到效果图,比如,你写个代码,但是你想看看它现在能否运行,一般的做法就是写个HTML+CSS然后将JavaScript嵌入到里面去,这样做显然太麻烦,而且你修改后还得在刷新才能浏览器中运行看到效果,到最后就是浏览器和编辑器频繁切换,影响开发速度和效率甚至占用多余的系统资源。于是,控制台应运而生,它使得我们可以轻松的使用JavaScript代码而无需再搭配HTML和CSS才能运行,一个Console统统搞定,这就是我们刚刚说的控制台。我们可以先来看看它的功能:

可以看到,它是有自动提示功能的,而且比任何三方IDE的都要全面,因为它是和浏览器配套使用的,而其它IDE则无法做到这么齐全,所以你可以看到有时候如果你想用某种方法它不会提示,那就只有一个原因,就是你用错了。

1).改变它的编辑状态

控制台输入:

![4](4.jpgdocument.body.contentEditable=true

在编辑状态下,我们的点击操作是没有任何作用的,也就是说只能修改,如果想还原,刷新一下浏览器即可。

2).定位特定元素

这里我们可以先看看我们要看的浏览器图片元素的信息,可以先打印出所有的图片 ,这里使用一个特殊符号:

我们可以看到,通过这个语法糖可以打印当前页面所有的图片信息,显示70,说明这个页面有70张图片,当小编再次滚动鼠标时发现图片数量就变多了,变成了136张图片,这说明它是Ajax加载的。

除了这种获取图片的方式外,还可以这样:

document.images

得到的结果和上面的一模一样,有了这几样的知识点积累,我们现在就可以轻松获取所有的图片链接了。

4.获取图片链接和图片名

这里我们要把获取到的图片添加到数组中,然后在遍历即可打印出所有的图片。

1).建立数组存放所有的图片

ab=document.images #获取当前页面所有图片
var aa=[]           #建立数组
for(const y of ab){    #建立const变量使得无法修改
    aa.push(y); #把图片装进数组
}

2).遍历数组打印图片链接

这里可以使用多种方法,小编一 一介绍。

1)).For ...in
for(const a in aa){
    console.log(aa[a])
}

2)).For...of
for(const a of aa){
    console.log(a)
}

3)).ForEach
aa.forEach(function(val,item,array){
  console.log(val)
});

4)).Map
![10](10.jpgaa.map(function(val,item,array){
  console.log(val)
});

可以看到第四种方法和第三种方法差不多,但是它们还是有差别的,前者是没有返回值的,而后者有并且后者支持修改返回值。虽然我们打印出了图片链接,但是图片名字并没有打印出来,于是小编开始找图片名字:

发现它在Div标签里,于是小编开始找满足条件的Div:

document.querySelectorAll('div.img_tit')#精确找到所有类名为img_tit的Div
document.getElementsByClassName('img_tit')#找到所有类名为img_tit

然后我们先输出图片名再输出图片链接,这样就可以使用循环然后进行判断,如下图:

var a=0;
do{
  a++;
  if(a%2==0){
    console.log(aa[a])
}
    else{
    console.log(ac[a])
  }

}
while(a<ac.length)

可以看到按照顺序打印出了。另外,我们发现当我们打印出了这些结果值后感觉控制台都已经爆满了,我们想清空这些信息那该怎么办了?一行代码就能搞定啦。

当然,这项功能你可别指望它能在你控制台相当干净的时候起作用。看了这么多了我们再来看看图片的查看功能吧。

5.图片查看

希望上面的方法应该不会让读者眼花缭乱才是,因为Js是一门动态语言,所以它的骚操作实在是太多了,你懂的。言归正传,如果我们现在想快速查看某一张图片,那么怎么办呢?有人说单击它,我想告诉你的是,虽然这可以实现查看功能,但这是在被包裹的网页中查看,如果我们在单独的网页中查看了,比如说这样:

那我们要想只看这一张图片而不看其它的内容了,那又该怎么办了?最传统的方法:

点击红色箭头处,可以看到如下图:

感觉是不是就好多了,没有其它的东西干扰我们,专心致志的看图,多爽。但是我们开发者可不能这么做,因为太没技术含量了,我们要时时刻刻挑战自己;所以我决定用JS代码来查看这张图片。

我们可以先看看这个,代码如下:

function view(src,filename) {
                var link = document.createElement('a');#创建a标签
                link.setAttribute("download", filename);#设置download属性
                link.href = src;#设置href属性
                document.body.appendChild(link);#将a标签添加到网页主体中
                link.click();
                document.body.removeChild(link);#删除a标签
            }
view('https://p0.ssl.qhimgs1.com/bdr/326__/t0160c8456511be3c4e.jpg','t0160c8456511be3c4e.jpg')

可以看到我们成功在浏览器中查看了这张图片。

四、总结

突然发现小编还是比较有才的,这都能被小编捕捉到,不过还是不能太得意,以免翻车。另外,如果大家想在自家服务器上添加图片下载功能,超简单的,一行代码搞定。

<a href="http://localhost:8080/12.jpg" download="12.jpg">点我下载</a>

这样就能生成一个下载图片的点击链接了。

posted @ 2021-09-02 21:16  dcpeng  阅读(3340)  评论(0编辑  收藏  举报