微信图片反防盗链 用js不太成熟的解决方式 仅供参考

微信图片反防盗链 用js不太成熟的解决方式 仅供参考

$("#imgDiv img").each(function () {
    var img = $(this);
    var img_src = img.attr("src") + "?" + Math.random();
    var frameid = "frameimg" + Math.random();

    var image = new Image();
    image.src = img_src;
    image.onload = function () {
        window.img = '<img id="img" src=\'' + img_src + '\'/>';
        window.img += '<style></style>';
        window.img += '<script>window.οnlοad=function(){';
        window.img += 'parent.document.getElementById(\'' + frameid + '\').height=document.getElementById(\'img\').height+\'px\'';
        window.img += 'parent.document.getElementById(\'' + frameid + '\').width=document.getElementById(\'img\').width+\'px\'';
        window.img += '}<' + '/script>';
        img.parent().append('<iframe width="' + image.width + 'px" height="' + image.height + 'px" id="' + frameid + '" src="javascript:parent.img" frameBorder="0" scrolling="no"></iframe>');
        img.remove();
    }
});

 此方法每张图片会创建一个iframe,比较耗费资源,请根据实际情况确定是否使用

 

ps:此外还要在页面或者模板页中加上:

<meta name="referrer" content="never">

 后来需要iframe中的图片最大宽度为800并居中:

$("#imgDiv img").each(function () {
    var img = $(this);
    var img_src = img.attr("src") + "?" + Math.random();
    var frameid = "frameimg" + Math.random();

    var image = new Image();
    image.src = img_src;
    image.onload = function () {
        var ff = 1;

        if (image.width > 800) {
            ff = 800 / image.width;
            image.width = 800;
        }
        window.img = '<img style="max-width:800px" id="img" src=\'' + img_src + '\'/>';
        window.img += '<style></style>';
        window.img += '<script>window.οnlοad=function(){';
        window.img += 'parent.document.getElementById(\'' + frameid + '\').height=document.getElementById(\'img\').height+\'px\'';
        window.img += 'parent.document.getElementById(\'' + frameid + '\').width=document.getElementById(\'img\').width+\'px\'';
        window.img += '}<' + '/script>';
        img.parent().append('<iframe style="display:block;margin:0px auto;overflow:hidden;width:' + image.width + 'px;"  height="' + image.height * ff + 'px" id="' + frameid + '" src="javascript:parent.img" frameBorder="0" scrolling="no"></iframe>');
        img.remove();
    }
});

 

posted @ 2017-09-21 16:01 青衫仗剑 阅读( ...) 评论( ...) 编辑 收藏