图片展示

“此图片来自微信公众平台未经允许不可引用”怎么破?JS可破

关注:3144 发表时间:2017-05-05 16:46:28

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
function showImg(url) {
    var frameid = 'frameimg' + Math.random();
    console.debug(frameid);
    console.debug(url);
 
    window.img = '<img id="img" style="width:50%" src=\'' + url + '?' + Math.random() + '\' /><script>window.onload = function() { parent.document.getElementById(\'' + frameid + '\').height = document.getElementById(\'img\').height+\'px\'; }<' + '/script>';
    document.write('<iframe id="' + frameid + '" src="javascript:parent.img;" frameBorder="0" scrolling="no" width="50%"></iframe>');
 
}
</script>
 
    <h1>原图:</h1>
    <img src="http://mmbiz.qpic.cn/mmbiz/dYNplyiblCFna8JoYZw71MH8Z8ib8KBALnJ7DibpDVSLPW4oy0nVhPfEG7PxCVwia6YP1OFibowWWkm2T0pn63icArPQ/0?tp=webp&wxfrom=5&wx_lazy=2" /><br>
 
     <h1>js破解之后:</h1>
     <br>
 
    <div id="hotlinking">
        <script>showImg('http://mmbiz.qpic.cn/mmbiz/ibbmVK4uC7iacR4KGWnyJHvQxl276DK6eGlZQ10E7BeY7Fw0ZlnPLXOSF8W4qIiaCsNspcEiaicD0McR79qmicfPGntg/0');</script>
 
    </div>
</body>
</html>



更多方法:


当我们想在文章里引用某张图片时,如果对方设置了防盗链,我们看到的将是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">
    <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">
    <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">
    <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">
    <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">
    <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>

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

图片展示
  • 联系人:
  • QQ:
  • 留言内容:
  • 验证码:
    请输入验证码

留言列表


【5】 2017-04-30
66666
回复内容2017-04-30
去你的……
重置文章字号 更多+

贴心服务

  • 网站每周自动备份
  • 生成APP,一下高大上
  • 云服务器,不需另外买空间
  • 域名代备案

帮助中心

  • Bootstrap前端框架
  • SuperSlide.2.1.1
  • FlexSlider-0690ec2
  • 有问必答

联系我们

  • service@sanxiegang.com
©2008-2017 三斜杠网络公司版权所有 盗用必究 QQ:2558731797
三斜杠专注于深圳小微企业网站建设,为您打造个性化互联网平台. 粤ICP备17053880号