이미지 요청을 하면 0과 1로 이루어진 buffer형태로 오고 그것을 fs로 읽는다
npm i axios
이미지 소스 주소 뒤 query string을 제거
//index.js
const axios = require('axios'); //axios
const fs = require('fs'); //buffer를 읽을 fs
//'screenshot' 폴더가 있는지 확인
//없으면(err) 폴더 생성
fs.readdir('screenshot', (err) => {
if (err) {
console.error('screenshot 폴더가 없어 screenshot 폴더를 생성합니다.');
fs.mkdirSync('screenshot');
}
});
fs.readdir('poster', (err) => {
if (err) {
console.error('poster 폴더가 없어 poster 폴더를 생성합니다.');
fs.mkdirSync('poster');
}
});
$('.poster img')
//<img src="https://" alt="" >
$('.poster img').src
//"https://"
//page.evaluate 내에 DOM 사용가능
const result = await page.evaluate(() => {
const scoreEl = document.querySelector('.score.score_left .star_score');
let score = '';
if (scoreEl) {
score = scoreEl.textContent;
}
//이미지 가져오는 부분
const imgEl = document.querySelector('.poster img');
let img = '';
if (imgEl) {
img = imgEl.src;
}
//객체로 묶어서 리턴
return { score, img };
});
//평점이 있으면
if (result.score) {
console.log(r.제목, '평점', result.score.trim());
const newCell = 'C' + (i + 2);
add_to_sheet(ws, newCell, 'n', parseFloat(result.score.trim()));
}
if (result.img) {
//imgResult에 이미지들의 버퍼형태 저장
const imgResult = await axios.get(result.img, { //이미지 주소 result.img를 요청
responseType: 'arraybuffer', //buffer가 연속적으로 들어있는 자료 구조를 받아온다
});
//fs로 읽어준다
//console에서 이미지 확장자 확인 후 같은 것으로 적용
fs.writeFileSync(`poster/${r.제목}.jpg`, imgResult.data);
}
//index.js
const xlsx = require('xlsx');
const puppeteer = require('puppeteer');
const add_to_sheet = require('./add_to_sheet');
const axios = require('axios'); //axios
const fs = require('fs'); //buffer를 읽을 fs
const workbook = xlsx.readFile('xlsx/data.xlsx');
const ws = workbook.Sheets.영화목록;
const records = xlsx.utils.sheet_to_json(ws);
fs.readdir('screenshot', (err) => {
if (err) {
console.error('screenshot 폴더가 없어 screenshot 폴더를 생성합니다.');
fs.mkdirSync('screenshot');
}
});
fs.readdir('poster', (err) => {
if (err) {
console.error('poster 폴더가 없어 poster 폴더를 생성합니다.');
fs.mkdirSync('poster');
}
});
const crawler = async () => {
try {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.0 Safari/537.36');
add_to_sheet(ws, 'C1', 's', '평점');
for (const [i, r] of records.entries()) {
await page.goto(r.링크);
const result = await page.evaluate(() => {
const scoreEl = document.querySelector('.score.score_left .star_score');
let score = '';
if (scoreEl) {
score = score.textContent;
}
//이미지 가져오는 부분
const imgEl = document.querySelector('.poster img');
let img = '';
if (imgEl) {
img = imgEl.src;
}
//객체로 묶어서 리턴
return { score, img };
});
//평점이 있으면
if (result.score) {
console.log(r.제목, '평점', result.score.trim());
const newCell = 'C' + (i + 2);
add_to_sheet(ws, newCell, 'n', parseFloat(result.score.trim()));
}
if (result.img) {
//imgResult에 이미지들의 버퍼형태 저장
const imgResult = await axios.get(result.img, { //이미지 주소 result.img를 요청
responseType: 'arraybuffer', //buffer가 연속적으로 들어있는 자료 구조를 받아온다
});
//fs로 읽어준다
//console에서 이미지 확장자 확인 후 같은 것으로 적용
fs.writeFileSync(`poster/${r.제목}.jpg`, imgResult.data);
}
await page.waitFor(1000);
}
await page.close();
await browser.close();
xlsx.writeFile(workbook, 'xlsx/result.xlsx'); //엑셀에 입력
} catch (e) {
console.error(e);
}
}
crawler();
const browser = await puppeteer.launch({
headless: process.env.NODE_ENV === 'production',
args: ['--window-size=1920,1080']
});
const page = await browser.newPage(); //이거 아래에
await page.setViewport({
width: 1920,
height: 1080,
})
//방법1
const buffer = await page.screenshot(); //스크린샷 찍어서 buffer에 저장
fs.writeFileSync('screenshot/', buffer); //fs로 읽은 것을 screenshot폴더에 저장
//방법2
await page.screenshot({ path: `screenshot/${r.제목}.png` }); //바로 스크린샷 폴더에 제목 이름으로 저장
웹툰처럼 긴 것 한 번에 캡처 가능
await page.screenshot({ path: `screenshot/${r.제목}.png`, fullPage: true });
await page.screenshot({
path: `screenshot/${r.제목}.png`,
clip: {
x: 100,
y: 100,
width: 300,
height: 300,
}
});
//index.js
const xlsx = require('xlsx');
const puppeteer = require('puppeteer');
const add_to_sheet = require('./add_to_sheet');
const axios = require('axios');
const fs = require('fs');
const workbook = xlsx.readFile('xlsx/data.xlsx');
const ws = workbook.Sheets.영화목록;
const records = xlsx.utils.sheet_to_json(ws);
fs.readdir('screenshot', (err) => {
if (err) {
console.error('screenshot 폴더가 없어 screenshot 폴더를 생성합니다.');
fs.mkdirSync('screenshot');
}
});
fs.readdir('poster', (err) => {
if (err) {
console.error('poster 폴더가 없어 poster 폴더를 생성합니다.');
fs.mkdirSync('poster');
}
});
const crawler = async () => {
try {
const browser = await puppeteer.launch({
headless: process.env.NODE_ENV === 'production',
args: ['--window-size=1920,1080']
});
const page = await browser.newPage();
await page.setViewport({
width: 1920,
height: 1080,
})
await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.0 Safari/537.36');
add_to_sheet(ws, 'C1', 's', '평점');
for (const [i, r] of records.entries()) {
await page.goto(r.링크);
const result = await page.evaluate(() => {
const scoreEl = document.querySelector('.score.score_left .star_score');
let score = '';
if (scoreEl) {
score = score.textContent;
}
const imgEl = document.querySelector('.poster img');
let img = '';
if (imgEl) {
img = imgEl.src;
}
return { score, img };
});
if (result.score) {
console.log(r.제목, '평점', result.score.trim());
const newCell = 'C' + (i + 2);
add_to_sheet(ws, newCell, 'n', parseFloat(result.score.trim()));
}
if (result.img) {
//이미지 처리하는 곳에서 스크린샷 바로 저장
await page.screenshot({ path: `screenshot/${r.제목}.png`, fullPage: true });
const imgResult = await axios.get(result.img, {
responseType: 'arraybuffer',
});
fs.writeFileSync(`poster/${r.제목}.jpg`, imgResult.data);
}
await page.waitFor(1000);
}
await page.close();
await browser.close();
xlsx.writeFile(workbook, 'xlsx/result.xlsx');
} catch (e) {
console.error(e);
}
}
crawler();
크롤링할 때마다 이미지 태그들을 찾아서 사용해야한다
document.querySelector('img')
달러 함수는 document.querySelector 함수를 뜻한다
document.querySelector()
$()
document.querySelectorAll()
$$()
선택자 조합해서 특정 태그 선택 가능
.
은 클래스$$('div.spot')
//spot 클래스명을 가진 div 모두
#
은 아이디$$('div#header')
//header란 아이디를 가진 div 모두
$$('div.score.score_left')
//<div class="score score_left>
//클래스이름이 score면서 score_left인 div 태그
$$('div a img')
//div 안의 a태그 안의 img 태그 모두
$$('div > a > img')
//div 바로 아래 a태그, 또 그 아래 바로 img인 태그 모두
$$('div.poster img')[1]
//poster라는 클래스명을 가진 div 안에 있는 img 중 두번째 것
$$('.poster img')
//poster라는 클래스명을 가진 div
$$('.score.score_left').textContent
//8.78
$$('.score.score_left').innerHTML
//안에 들어있는 태그들
$$('.poster img').src
//img의 소스만
$$('.poster img').alt
//"알리타: 배틀 엔젤"
$$('img[width="26"]')
//img의 width가 26인 태그들