获取本公司页面所有图片地址，刷cdn

由于双十一等大活动，公司的活动页面在很多人访问的时候，需要把图片刷入cdn中，减少用户请求等待时间，减小服务器压力。所有需要获取我们的11个活动页面的所有图片，如果通过chrome调试台一个个的抓不现实（而且图片有懒加载，要页面滚动到具体位置，才加载）。所以后面自己写了一个页面，输入目标页面，通过iframe嵌入本页面，加载完成后获取目标页面的所有图片地址；

!DOCTYPE html>



    
    
    
    
    


    


    点击获取


    


    

由于都是获取本公司的网站下的图片地址，所以不存在跨域。而且不会含有js文件，js中的图片链接也可以获取到

（如果不是存在跨域问题，in a frame because it set 'X-Frame-Options' to 'deny'，只有把页面下载到本地，然后自己把js加到下载页面底部，再页面加载完成后，获取本页面所有图片）

        window.onload = function() {
            var arr = [];
            var str = document.querySelector('html').innerHTML;
            var reg = /http.+(\.jpg|\.png|\.bmp|\.jpeg|\.gif|\.webp)/g   
            var temp;
            while (temp = reg.exec(str)) {
                arr.push(temp[0])
            }
            arr = Array.from(new Set(arr))
            console.log('图片地址',arr)

        }
    

当然有可能地址是相对于目标页面的相对路径。所以正则中的http可能需要更改一下，然后arr中的每一项也需要拼接上目标网站的域名。

2019-01-18

今天闲下来觉得用node解决一下抓取的跨域问题。

首先 通用要有node，然后安装依赖。创建js. 启动服务。KO;

var http = require('http');
var url = require('url');
var cheerio = require('cheerio');  // 类似于jquery

function download(url, callback) {
    http.get(url, function(res) {
        var data = '';
        res.on('data', function(chunk) {
            data += chunk;
        })
        res.on('end', function() {
            callback(data)
        })
    }).on('error', function() {
        callback(null)
    })
}


http.createServer(function(req, res) {
    console.log('启动服务')
    res.writeHead(200, { 'Content-Type': 'text/plain' });

    // 解析 url 参数
    var params = url.parse(req.url, true).query;
    var urls = params.url;
    download(urls, function(data) {
        if (data) {
            var $ = cheerio.load(data);
            var str = $('html').html()
            var arr = [];
            var reg = /http.+?(\.jpg|\.png|\.bmp|\.jpeg|\.gif|\.webp)/g

            var temp;

            while (temp = reg.exec(str)) {
                arr.push(temp[0])
            }

            arr = Array.from(new Set(arr))

            var txt = arr.join(`
`);
          
            console.log("done");
        } else {
            console.log('error')
        }

        res.end(txt);
    })


}).listen(3000);

启动服务后，访问的http://localhost:3000?url=http://test.html

就可以得到返回的数据了