html 화면 캡쳐 이미지 zip 파일 다운로드 ( php zip파일 다운 )

안뇽... 이전글에 이어 포스팅 또 왔다..😢

[ html2canvas / jszip ] html화면 캡쳐 zip파일로 다운받기

 

html2canvas + jszip을 같이 사용해서 자바스크립트만을 이용해 zip파일을 만들어서 뿌듯해 하고 있었는데...

다운 용량 제한이 있어서... 결국 php를 사용해야하는것이었다요...

그럼 이제 html2canvas로 만든 이미지를 base64 인코딩을 사용해 서버에 저장 후 zip파일을 만들려고한다.

이번에도 엄청 구글링 했다 :_)

 

---

벌써 3번째 언급하는 거지만 빠르게 훑어보고 가자.

자바스크립트에서는 canvas.toDataURL을 base64로 인코딩하여 ajax로 보내주었다.

let url_arg = [];

html2canvas(tag, {
	onrendered: function(canvas) {
    	// base64 encoding dataUrl
        url_arg.push( btoa(canvas.toDataURL('image/jpeg', 1.0)) );
        
        .
        .
        .
        
        var data = new Object();
        data.media = url_arg;                 
        $.ajax({
            type: "POST",
            url: "경로",
            dataType : 'json',
            data : data,
            cache: false,
            success: function(data) {
                console.log(data);
            }
        });
    });
});

 

 

이제 서버에선 받은 이미지를 디코딩 후 저장하고 zip으로 만들어 줄 것이다.

php ci를 사용해서 만들어서 ci에서 제공 해주는 zip 라이브러리를 사용했다.

파일을 로컬에 저장해준 후 ( 굳이 저장안해주고 바로 zip만드는 함수도 있었다 ) zip을 만들어 저장해주었다.

$media = $_POST['media']; // 이미지 배열		
$path = $_SERVER['DOCUMENT_ROOT']."/admin/images/display/";	// 저장 경로


// init - 기존 저장 파일 삭제
$handle = opendir($path); // 절대경로
while ($file = readdir($handle)) {
	@unlink($path.$file);
}
closedir($handle);

// 이미지 저장
foreach($media as $key=>$val){
    $img = base64_decode($val);
    $img = str_replace('data:image/jpeg;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    file_put_contents($path . 'display_'.$key.'.jpg', $data);

    $this->zip->read_file($path . 'display_'.$key.'.jpg');
}


// 서버에 zip 저장
$this->zip->archive($_SERVER['DOCUMENT_ROOT']."/admin/images/display/". 'display.zip');

저장후 ajax success에 zip파일을 다운로드해주는 php를 호출시켰다.

 

$filename = "display.zip";  // 파일명
$file = $_SERVER['DOCUMENT_ROOT']."폴더 경로" . $filename;
$len = filesize($file);


  header("Pragma: public");
  header("Expires: 0");
  header("Content-type: text/html; charset=utf-8");
  header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
  header("Cache-Control: public");
  header("Content-Description: File Transfer");
  header("Content-Type: application/zip");
  
  // 여기에 적어주는 filename은 다운받을 때 파일명
  header("Content-Disposition: attachment; filename=".$filename);
  header("Content-Transfer-Encoding: binary");
  header("Content-Length: ".$len);
  @readfile($file);

처음에 zip파일을 다운받으니 손상된 파일이라고 계속 떠서 엄청 삽질했는데 

그냥 view에서 다른 header를 불러와서 난 오류였다 -ㅅ-

다들 다운 오류시 header를 한번더 확인 하는 걸로 :)