DOM에서 스크린 샷을 PNG 파일로 생성했습니다.

html2canvas.js을 사용하여 웹 페이지의 스크린 샷을 만듭니다. 유일한 것은이 데이터를 이미지 파일 형식으로 전송하여 데이터베이스에 저장하고 링크 할 수있는 방법을 모르겠다는 것입니다.DOM에서 스크린 샷을 PNG 파일로 생성했습니다.

이 내 현재 코드입니다 :

<script language="Javascript"> 
    setInterval(function() { 
     html2canvas(document.body, { 
      onrendered: function(canvas2) { 
       context.drawImage(video, 0, 0, 240, 180); 
       $.post(
        "' . self::get_link('save_screenshots') . '", 
        "user_id=' . module_security::get_loggedin_id() . 
        '&screenshot=" + encodeURI(canvas2.toDataURL()) 
       ); 
       document.body.appendChild(canvas2) 
      } 
     }) 
    }, 1*60*1000); 
</script>

출처

2014-07-01 jfh6

toDataURl ("image/png") 다음에는 base64 형식의 데이터가 제공됩니다. 이 base64 데이터를 서버 측에서 처리하는 방법을 의미합니까? –

예, 원래의 아이디어는 PHP 스크립트를 통해 base64 데이터를 실행하고 데이터베이스에 업로드하는 것이 었습니다. – jfh6

하지만 가능하지 않은 경우 데이터를 .png 파일로 저장하고 데이터베이스에 대한 링크가있는 이미지 디렉토리에 저장하고 싶습니다. – jfh6

이 당신을 도울 수 있습니다

이

<?php 
    // requires php5 
    define('UPLOAD_DIR', 'your/images/directory/'); 
    $img = $_POST['img']; 
    $img = str_replace('data:image/png;base64,', '', $img); 
    $img = str_replace(' ', '+', $img); 
    $data = base64_decode($img); 
    $img_file = UPLOAD_DIR . uniqid() . '.png'; 
    $success = file_put_contents($img_file, $data); 
    if($img_file){ 
     // store the link to database 
    } else{ 
     //return error msg 
    } 

?>

출처

2014-07-01 03:37:58

덕분에, 이것이 도움이되었습니다. – jfh6

당신은 jQuery를 당신을 위해 요청 인코딩 처리하도록한다 : 다음

$.post(url, { 
    user_id: 123, 
    screenshot: canvas2.toDataURL() 
}, function() { 
    // success 
    document.body.appendChild(canvas2); 
});

을, 당신은 서버 측에서 이렇게 디코딩하십시오.

$data = base64_decode(substr(
    $_POST['screenshot'], 
    strpos($_POST['screenshot'], ',') + 1 
));

출처

2014-07-01 03:45:15

귀하의 게시물을 완전히 이해하지 못했습니다. 좀 더 설명해 주시겠습니까? – jfh6

@ jfh6 어느 부분을 이해하지 못합니까? –

canvas2가 어떻게 인코딩되는지 잘 모르겠습니다. – jfh6

DOM에서 스크린 샷을 PNG 파일로 생성했습니다.

답변

관련 문제