技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

【反防盗链】介绍一个对付图片防盗链的方法

作者:admin    时间:2016-11-11 16:42:49    浏览:

悲催的声明
由于腾讯也采用了防盗链技术,本文方法已经失效了!

当我们想在文章里引用某张图片时,如果对方设置了防盗链,我们看到的将是404或forbidden或其他图片,而不是想要的那张图片,为此,我们有无方法进行“反防盗链”呢?答案是有的,本文将介绍一个对付图片防盗链的方法,经测试有效。

反防盗链图片引用-HTML代码

举例说明,比如卡卡网站速度诊断的图片是防盗链的,图片引用的代码是:

<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg">

我们看到的不是原图,而是其他的图片。

我们可以把图片引用代码改为:

<img src="http://read.html5.qq.com/image?imageUrl=http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >

这样就可以正常显示自己想要的图片了。

上述方法很简单,就是采用第三方接口来获取图片,格式是:

<img src="http://read.html5.qq.com/image?imageUrl=图片地址" >

execcodegetcode

反防盗链图片引用-Javascript代码

一些人问到,对方最近才设置图片反盗链,但我已经发布了大量的文章,我岂不是要重新编辑文章,更改每个图片地址?这显然是不实际的。我现在要告诉你的是,没关系,我们网页可以通过一个JS程序,批量更改图片地址。我们要做的,只是更改一下文章页模版,引入一个反防盗链的JS文件,就可以了。

说了这么多,这个JS代码是怎样的呢?我们可以通过如下例子来了解。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>反防盗链实例_卡卡网 webkaka.com</title>
</head>
<body>
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
<script type="text/javascript">
        function showForbiddenImg(){
            var obj=document.getElementsByTagName('img');
            for(var i=0;i<obj.length;i++){
                if(obj[i].getAttribute('src')){
                    obj[i].setAttribute('src','http://read.html5.qq.com/image?imageUrl='+obj[i].getAttribute('src'));
                }
            }
        }
        showForbiddenImg();
</script>
</body>
</html>

execcodegetcode

这个代码很简单,它的作用是遍历网页所有图片,并在图片地址前面加上指定字符串。当然了,在实际应用中,不可能需要遍历网页所有图片,只需遍历文章里的图片即可,这需要自己更改一下这个js代码。

如何获得文章里的所有图片并更改图片地址

我们可以通过JQuery来实现此功能,请看如下实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>反防盗链实例_卡卡网 webkaka.com</title>
</head>
<body>
<div id="divArticle" class="arcContent">
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    //获取Class为arcContent里面的所有img
    var imglist=$(".arcContent img");
    //或使用下面这句,获取ID为divArticle里面的所有img
    //var imglist=$("#divArticle img");
    for(var i=0;i<imglist.length;i++){ 
        if(imglist[i].getAttribute('src')){
            imglist[i].setAttribute('src','http://read.html5.qq.com/image?imageUrl='+imglist[i].getAttribute('src'));
        }
    }
});
</script>
</html>

execcodegetcode

使用JQuery时,记得要先引用jquery.js文件。

JQuery代码还可以这样写:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>反防盗链实例_卡卡网 webkaka.com</title>
</head>
<body>
<div id="divArticle" class="arcContent">
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
<img src="http://pagespeed.webkaka.com/rpt/demo/liudehua_91193710_1.jpg" >
<br><br>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".arcContent img").each(function(index, element) { //$(".arcContent img") 可换为 $("#divArticle img")
        if($(element).attr('src')){
            $(element).attr('src','http://read.html5.qq.com/image?imageUrl='+$(element).attr('src'));
        }
    });
  });
</script>
</html>

execcodegetcode

上述两个JQuery实例,一个通过for循环赋值,一个通过 $("selector").each(function(index, element) 赋值,殊途同归。

本文实例演示及源码文件下载

demodownload

标签: 防盗链  
相关文章
    • IT热文
    • 站长推荐