Как я могу скачать изображения на странице с помощью кукловода?

Question

Я новичок в изучении веб-страниц и хочу загрузить все изображения на веб-странице с помощью puppeteer:

const puppeteer = require('puppeteer');

let scrape = async () => {
  // Actual Scraping goes Here...

  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://memeculture69.tumblr.com/');

  //   Right click and save images

};

scrape().then((value) => {
    console.log(value); // Success!
});

Я посмотрел документы API‌ , но не смог понять, какчтобы достичь этого.Так что ценю вашу помощь.

Answer 1

Для загрузки изображения его селектором я сделал следующее:

1. Получено uri для изображения с использованием селектора

2. Пропущено uri к функции загрузки

   const puppeteer = require('puppeteer');
   const fs = require('fs');
   var request = require('request');
   
   //download function
   var download = function (uri, filename, callback) {
       request.head(uri, function (err, res, body) {
           console.log('content-type:', res.headers['content-type']);
           console.log('content-length:', res.headers['content-length']);
           request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);
       });
   };
   
   (async () => {
        const browser = await puppeteer.launch({
         headless: true,
         args: ['--no-sandbox', '--disable-setuid-sandbox'], //for no sandbox
       });
       const page = await browser.newPage();
       await page.goto('http://example.com');// your url here
   
       let imageLink = await page.evaluate(() => {
           const image = document.querySelector('#imageId');
           return image.src;
       })
   
       await download(imageLink, 'myImage.png', function () {
           console.log('done');
       });
   
       ...
   })();
   

Ресурс: Загрузка изображений с помощью node.js

Answer 2

Этот код сохраняет все изображения, найденные на странице, в папку изображений

page.on('response', async (response) => {
  const matches = /.*\.(jpg|png|svg|gif)$/.exec(response.url());
  if (matches && (matches.length === 2)) {
    const extension = matches[1];
    const buffer = await response.buffer();
    fs.writeFileSync(`images/${matches[0]}.${extension}`, buffer, 'base64');
  }
});

Answer 3

Если вы хотите пропустить обход dom вручную, вы можете записать изображения на диск прямо из ответа страницы.

Пример:

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    page.on('response', async response => {
        const url = response.url();
        if (response.request().resourceType() === 'image') {
            response.buffer().then(file => {
                const fileName = url.split('/').pop();
                const filePath = path.resolve(__dirname, fileName);
                const writeStream = fs.createWriteStream(filePath);
                writeStream.write(file);
            });
        }
    });
    await page.goto('https://memeculture69.tumblr.com/');
    await browser.close();
})();

Answer 4

Вы можете использовать следующее для очистки массива всех атрибутов src всех изображений на странице:

const images = await page.evaluate( () => Array.from( document.images, e => e.src ) );

Затем вы можете использовать Node File System Module и HTTP или Модуль HTTPS для загрузки каждого изображения.

Полный пример:

'use strict';

const fs        = require( 'fs' );
const https     = require( 'https' );
const puppeteer = require( 'puppeteer' );

/* ============================================================
    Promise-Based Download Function
============================================================ */

const download  = ( url, destination ) => new Promise( ( resolve, reject ) =>
{
    const file = fs.createWriteStream( destination );

    https.get( url, response =>
    {
        response.pipe( file );

        file.on( 'finish', () =>
        {
            file.close( resolve( true ) );
        });
    })

    .on( 'error', error =>
    {
        fs.unlink( destination );

        reject( error.message );
    });
});

/* ============================================================
    Download All Images
============================================================ */

( async () =>
{
    const browser = await puppeteer.launch();
    const page    = await browser.newPage();

    let result;

    await page.goto( 'https://www.example.com/' );

    const images = await page.evaluate( () => Array.from( document.images, e => e.src ) );

    for ( let i = 0; i < images.length; i++ )
    {
        result = await download( images[i], `image-${i}.png` );

        if ( result === true )
        {
            console.log( 'Success:', images[i], 'has been downloaded successfully.' );
        }

        else
        {
            console.log( 'Error:', images[i], 'was not downloaded.' );
            console.error( result );
        }
    }

    await browser.close();
})();

Answer 5

Вот еще один пример.Он переходит к обычному поиску в Google и загружает изображение Google в левом верхнем углу.

const puppeteer = require('puppeteer');
const fs = require('fs');

async function run() {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.setViewport({ width: 1200, height: 1200 });
    await page.goto('https://www.google.com/search?q=.net+core&rlz=1C1GGRV_enUS785US785&oq=.net+core&aqs=chrome..69i57j69i60l3j69i65j69i60.999j0j7&sourceid=chrome&ie=UTF-8');

    const IMAGE_SELECTOR = '#tsf > div:nth-child(2) > div > div.logo > a > img';
    let imageHref = await page.evaluate((sel) => {
        return document.querySelector(sel).getAttribute('src').replace('/', '');
    }, IMAGE_SELECTOR);

    console.log("https://www.google.com/" + imageHref);
    var viewSource = await page.goto("https://www.google.com/" + imageHref);
    fs.writeFile(".googles-20th-birthday-us-5142672481189888-s.png", await viewSource.buffer(), function (err) {
    if (err) {
        return console.log(err);
    }

    console.log("The file was saved!");
});

    browser.close();
}

run();

Если у вас есть список изображений, которые вы хотите загрузить, вы можете изменить селектор, чтобы он изменялся по мере необходимости, иперейдите вниз по списку изображений, загружая их по одному.

Answer 6

Логика проста, я думаю.Вам просто нужно сделать функцию, которая будет брать URL изображения и сохранять его в вашем каталоге.Кукольник просто очистит URL-адрес изображения и передаст его функции загрузчика.Вот пример:

const puppeteer = require("puppeteer");
const fs = require("fs");
const request = require("request");

//  This is main download function which takes the url of your image
function download(uri, filename, callback) {
  request.head(uri, function(err, res, body) {
    request(uri)
    .pipe(fs.createWriteStream(filename))
    .on("close", callback);
 });
}

let scrape = async () => {
 // Actual Scraping goes Here...
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto("https://memeculture69.tumblr.com/");
    await page.waitFor(1000);
    const imageUrl = await page.evaluate(() =>
    document.querySelector("img.image") // image selector
    ); // here we got the image url.
    // Now just simply pass the image url to the downloader function to 
    download  the image.
    download(imageUrl, "image.png", function() {
     console.log("Image downloaded");
  });
 };

scrape()