구글 검색엔진 API, Node js, Vue js를 사용하여 이미지 크롤링하기

전체/Vuejs

구글 검색엔진 API, Node js, Vue js를 사용하여 이미지 크롤링하기 - 1

effortDev 2020. 10. 18. 17:59

구글 검색엔진 API, Node js, Vue js를 활용하여 간단하게 이미지 크롤링하는 프로젝트를 만들어 보려고 한다.

본인은 구글 이미지를 크롤링 할 수 있는 오픈소스가 있는지 검색하였고

github에서 google-images라는 오픈소스를 발견하여 npm을 이용하여 해당 오픈소스를 설치하여 활용하였다.

1. 일단 제일 먼저 Nodejs프로젝트를 생성해보자.

폴더를 하나 만들고 cmd에서 해당폴더의 경로로 이동 후 npm init을 한다.

그럼 package.json이 생성되고 해당 폴더경로로 VSC(visual studio code)로 오픈한다.

2. VSC에서 TERMINAL창을 열고 해당 위치에서 필요한 package를 설치한다.

3. 구글 커스텀 검색 엔진을 생성한다.

https://cse.google.com/cse

들어가서 간단하게 구글 검색엔진을 생성할 수 있고

생성하면 검색엔진 ID가 나오게 된다.

이미지 검색 부분을 가능하게 설정해주고

해당 검색엔진 ID를 보관한다.

4. 구글 개발자 콘솔로 접속하여 프로젝트를 생성 및 연결하기

https://console.developers.google.com/

구글 개발자 콘솔로 접속하여 프로젝트를 생성한다.

본인은 googleSearchApiTest라는 프로젝트를 생성했다.

프로젝트 생성 이후 라이브러리로 이동하여 custom search api를 검색하여 api 사용해보기를 설정한다.

그다음 사용자 인증정보 탭으로 이동 후 API 키를 하나 생성한다.

여기서 생성한 API_KEY를 보관한다.

우리는 총 2개의 값 (검색엔진 ID와 API_KEY) 를 갖게 되었다.

오픈소스 google-images 레퍼런스

https://github.com/vadimdemedes/google-images

5. 다시 프로젝트로 돌아온다.

getGoogleImg.js라는 자바스크립트 파일을 하나 생성한다.

6. 구글검색엔진으로 이미지 크롤링 하기 위한 코드를 작성한다.

getGoogleImg.js 파일에 해당 코드를 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
const GoogleImages = require('google-images');
let url = require('url');
let request = require('request');
const fs = require('fs');
var zip = new require('node-zip')();
 
// ** 8라인 본인의 검색엔진 ID와 API_KEY로 교체 필수
const client = new GoogleImages('검색엔진 ID', 'API_KEY');
 
const keyWord = "조현영";
const pageStVal = 1;
const pageEndVal = 201;
 
let saveDir = __dirname + "/"+keyWord;
 
if(!fs.existsSync(saveDir)){
    fs.mkdirSync(saveDir);
}
 
// 이미지 검색
const searchFunc = (pageStVal) =>{
    client.search(keyWord,  {page: pageStVal, size: 'large'}).then(images => {
        images.forEach(img => {
            console.log(img);
            let filePath = url.parse(img.url).pathname;
            let newFilePath = filePath.replace(/[^a-zA-Z0-8\.]+/g, '_');
            let localFilePath = saveDir + "/" + newFilePath;
            let pattern = /\.(jpg|png|gif)\b/; 
            
            // 파일길이가 200 미만이고 이미지 파일인지 체크
            if(newFilePath.length<200 && pattern.test(newFilePath)){
                try {
                    request.get(img.url).on('error', function(err) {
                        console.log('request error1:', err);
                    }).pipe(
                        fs.createWriteStream(localFilePath).on('close', function() {})
                    );
                } catch (err) {
                    console.log('request error2:', err);
                }
            };
        });
        compareTwoVal(pageStVal, pageEndVal);
    }).catch(error => {
        console.log(">>>>>>>>>>>>>>>>>>>"+error);
        console.log("모든 이미지를 수집했습니다.");
        makeImgToZip();
        return;
    });
}
 
// 이미지 압축파일 만들기
const makeImgToZip = () =>{
    var zipName = keyWord+".zip";
    var someDir = fs.readdirSync(__dirname+"/"+keyWord);
    var newZipFolder = zip.folder(keyWord);
    
    for(var i = 0; i < someDir.length; i++){
        newZipFolder.file(someDir[i], fs.readFileSync(__dirname+"/"+keyWord+"/"+someDir[i]),{base64:true});
    }
    var data = zip.generate({base64:false,compression:'DEFLATE'}); 
    fs.writeFile(__dirname +"/"+ zipName, data, 'binary', function(err){
        if(err){
            console.log(err);
        }
    });
}
 
// 페이징 검색
const compareTwoVal = (pageStVal, pageEndVal) =>{
    if(pageStVal<=pageEndVal){
        setTimeout(function() {
            pageStVal += 10;
            console.log("pageStVal: >>>>>>>>"+pageStVal);
            searchFunc(pageStVal);
        }, 500);
    }else{
        console.log("모든 이미지를 수집했습니다.");
        makeImgToZip();
        return;
    }
}
 
// 이미지 수집 시작
searchFunc(pageStVal);
Colored by Color Scripter
cs