웹URL 주소로 캡쳐 하는 프로그램 만들어 보도록 하겠습니다

https://www.moayo.net/p-moayo-20551 (짧은주소)

웹 URL주소를 이미지로 변환해 주는 프로그램을 만들어 봅니다

html2canvas 플러그인을 통해서 웹페이지를 캡쳐할수 있습니다

하지만 자신의 홈페이지에서만 가능 하지 다른 URL주소의 내용은 캡쳐할수 없는 단점이 있습니다

해서 URL주소를 입력하면 해당 주소의 내용을 캡쳐후 이미지로 반환해주는 프로그램을 만들어 보려합니다

작동원리

작업전 준비 작업

1)PHP 홈페이지

2)서브서버로 사용할 윈도우 PC

3)공유기 포트포워드 설정 (메인서버에서 가상아이피를 사용하는 서브서버로 접속하기 위함)

4)서브서버에 파이썬 설치

5)서브서버에 파이썬 flask 설치

6)서브서버에 파이썬 selenium 설치

위 순서대로 진행을 하려합니다

핵심은 메인서버에서 서브서버의 특정 프로그램을 실행 시켜주는 것입니다

일반적으로 웹상에서 다른 PC의 프로그램을 컨트롤 하기가 어렵습니다

처음 개발단계에서 웹소켓을 통해 프로그램을 컨트롤 하려 했습니다

실재로 http로는 컨트롤까지 되었습니다

그러나 홈페이지가 https인 경우 ws가 아닌 wss 웹소켓만 사용해야 하는 문제가 있어서

php file_get_contes() 함수와 flask서버를 사용해 컨트롤 하는 방법을 채택하였습니다

처음 계획이 수정되어 편법을 사용한 것이 아닌가 생각되었지만

flask 를 사용해보니 서브서버가 안정적으로 작동하여 오히려 더 나은 방법이라 판단됩니다

유튜브주소

url_capture.php

<?
include "{$_SERVER[DOCUMENT_ROOT]}swww/header.php";//헤더정보
include $_SERVER[DOCUMENT_ROOT]."swww/top.php";//탑부분 호출
?>
<script>
//캡쳐
function ajax_url_capture(){
  var form=document.form;
  if(form.http_url.value==""){
    alert("캡쳐할 URL주소를 입력해주세요");
    form.http_url.focus();
    return;
  }

  $("#info_text").show();//안내문구노출

  $.ajax ({
    type: "post", // POST 로 전송
    dataType: "", // JSON 타입이 아닐경우 제거
    url: "url_capture_ok.php", // 호출 URL
    data: {"t":"ajax_url_capture", "http_url":form.http_url.value}, // 파라메터 정보 전달
    success:function(data){
      $("#info_text").hide();//안내문구제거
      eval(data);      
    },
    error:function(e) {
      $("#info_text").hide();//안내문구제거
    }
  });
}
</script>
<form name="form" method="post" action="url_capture_ok.php" onsubmit="return false">
  <input type="text" name="http_url" value="" style="width:300px;" placeholder="https:// 포함한 정확한 주소를 입력해주세요">
  <input type="button" value="캡쳐하기" onclick="ajax_url_capture()">  
</form>

<!-- 이미지 미리보기부분 -->
<div id="info_text" style="display:none;position:absolute;top:35px;">캡쳐중입니다</div>
<div id="pre_image" style="margin-top:10px;"></div>

<?
include $_SERVER[DOCUMENT_ROOT]."swww/bottom.php";//하단 호출
include "{$_SERVER[DOCUMENT_ROOT]}swww/tail.php";//종료
?>

url_capture_ok.php

<?
include "{$_SERVER[DOCUMENT_ROOT]}swww/header.php";//헤더정보

//캡쳐하는 부분
if($t=="ajax_url_capture"){
  //화면캡쳐
  $md5=md5(uniqid(rand()));//중복되지 않는 파일명
  $filename="{$md5}.png";//파일명
  $saveDir = "{$_SERVER[DOCUMENT_ROOT]}swww/files/urlcapture/$filename";//파일저장위치
  $c_value=file_get_contents("http://124.57.157.211:15001/capture/".base64_encode($http_url)."/");//윈도우서버
  if($c_value){
    @file_put_contents($saveDir, base64_decode($c_value));//파일저장

    $return_capture="
    \$('#pre_image').append(\"<div><img src='/swww/files/urlcapture/$filename' width=400></div>\");//저장한 파일 불러오기
    ";

  }

  echo $return_capture;

}

include "{$_SERVER[DOCUMENT_ROOT]}swww/tail.php";//종료
?>

flask_server.py

import base64
import time

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
options = webdriver.ChromeOptions()
options.add_experimental_option('excludeSwitches', ['enable-logging'])

from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello'

@app.route('/capture/<capture_url>/')
def capture(capture_url):
    capture_url=str(base64.b64decode(capture_url))#캡쳐할 url주소
    #디코딩을 하면 b'내용' 이런식으로나와짐 해서 b',' 을 삭제함
    capture_url=capture_url.replace("b'","")
    capture_url=capture_url.replace("'","")

    
    #넘어온 URL주소
    driver = webdriver.Chrome(options=options) #브라우저지정
    driver.set_window_size(1400, 950) #화면크기조절    
    driver.get(url=capture_url)#브라우저띄우기
    
    time.sleep(5)
    
    #driver.save_screenshot("images_capture/images_capture.png")#화면캡쳐
    img_data=driver.get_screenshot_as_base64()
    driver.close() #브라우저 창닫기        
    
    return img_data	
    
if __name__ == '__main__':	
    app.run(host="192.168.133.168", port="9500", debug=True)

유사한정보