웹 페이지의 스크린 샷 이미지를 표시하는 중에 오류가 발생했습니다.

Question

지정된 div 탭의 스크린 샷을 만드는 코드가 있습니다. 하지만 문제가 발생하여 base64 형식의 .png 파일로 표시됩니다.

다음은 내 코드입니다. 두 개의 분리 된 파일

1

)

<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script type="text/javascript" src="js/html2canvas.js"></script> 
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script> 
<!-- --> 
<div id="target"> 
<img src="images/1.jpg" alt="Smiley face" width="100" height="100"> 
</div> 
<script type="text/javascript"> 
    function capture() { 
     $('#target').html2canvas({ 
      onrendered: function (canvas) { 
       //Set hidden field's value to image data (base-64 string) 
      $('#img_val').val(canvas.toDataURL("image/png")); 
      //Submit the form manually 
      document.getElementById("myForm").submit(); 
     } 
    }); 
} 
</script> 
<input type="submit" value="Take Screenshot Of Div" onclick="return capture();" /> 
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm"> 
<input type="hidden" name="img_val" id="img_val" value="" /> 
</form> 

2 Download.php

) 나 이미지가 로컬 호스트/XYZ/스크린/IMG 표시해야

<?php 
//Show the image 
$data = $_POST['img_val']; 

//Get the base-64 string from data 
$uri = substr($data, strpos($data, ",") + 1); 
//Decode the string 

$unencodedData = base64_decode($uri); 
$im = str_replace($data, '+', 'img.png'); 
//Save the image 
$v = file_put_contents($data, $im); 
$result = '<img src="' . $im . '" />'; 
print_r($result); 
?> 

Save.php

있다. png 할 수 없습니다. 제발 그 문제를 알아내는 데 도움이 코드를 참조하십시오.

미리 감사드립니다.

난 당신의 코드에서 target의 id 속성과 html의 모든 요소를 ​​볼 수 없습니다하지만 당신은 그것을 [여기]

$('#target').html2canvas({ 

비슷한 질문을 사용하는

Answer 1

[1]

나는

유용한 어떤 것을 발견했다

var html2obj = html2canvas($('body')); 

var queue = html2obj.parse(); 
var canvas = html2obj.render(queue); 
var img = canvas.toDataURL(); 

window.open(img); 
    [1]: http://stac 

koverflow.com/questions/10457608/create-screenshot-of-webpage-using-html2canvas-unable-to-initialize-properly