이전 버전과 호환되지 않는 html2canvas를 사용하여 div 이미지 가져 오기

Question

div을 사용하여 html2canvas을 사용하고 싶습니다. 그러나 코드가 제대로 작동하지 않습니다. 여기에 이전 버전에 문제가 코드

html2canvas($("#canvas-preview"), { 
 
    onrendered: function(canvas) { 
 
    theCanvas = canvas; 
 
    document.body.appendChild(canvas); 
 

 
    // Convert and download as image 
 
    //Canvas2Image.saveAsPNG(canvas); 
 
    $("#img-out").append(canvas); 
 
    // Clean up 
 
    //document.body.removeChild(canvas); 
 
    } 
 
});

#canvas-preview { 
 
    width: 200px; 
 
    border: 1px solid #000; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    border: 1px solid red 
 
} 
 
#canvas-preview::before, 
 
#image-container::before { 
 
    background-color: green; 
 
    content: ''; 
 
    display: block; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 
#custom-canvas { 
 
    margin: 10px; 
 
    color: #fff; 
 
    z-index: 2; 
 
    position: relative; 
 
    font-family: 'Anton'; 
 
    border: 1px solid green; 
 
}

<div id="canvas-preview" class=""> 
 
    <div id="custom-canvas"> 
 
    <div> 
 
     <span line-num="1" class="text-lines" style="font-size: 76.7025px;">ARFAN</span> 
 
    </div> 
 
    <div> 
 
     <span line-num="2" class="text-lines" style="font-size: 67.7685px;">HAIDER</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="image-out"></div>

이미지를 얻을 수 있지만 같은 div로 얻을이 기능은 뭐죠 참조 그냥 html2canvas의 새 버전을 설치하고이 제대로 작동 절반 만 이미지가 가득 차 있지 않습니다. 이 코드의 문제점은 무엇입니까? ? 이 이미지 같은

UPDATE

출력보세요.

Answer 1

다음 코드는

html2canvas($("#canvas-preview"), { 
 
    onrendered: function(canvas) { 
 
    theCanvas = canvas; 
 
    document.body.appendChild(canvas); 
 

 
    // Convert and download as image 
 
    //Canvas2Image.saveAsPNG(canvas); 
 
    $("#img-out").append(canvas); 
 
    // Clean up 
 
    //document.body.removeChild(canvas); 
 
    } 
 
});

#canvas-preview{ 
 
    width:auto; 
 
    border:1px solid #000; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    display:inline-block; 
 
} 
 
#canvas-preview::before, #image-container::before{ 
 
    background-color: green; 
 
    content: ''; 
 
    display: block; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index:1; 
 
} 
 
#custom-canvas{ 
 
    margin:10px; 
 
    color:#fff; 
 
    z-index:2; 
 
    position: relative; 
 
    font-family: 'Anton'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
<div id="canvas-preview" class=""> 
 
    <div id="custom-canvas"> 
 
     <div> 
 
      <span line-num="1" class="text-lines" style="font-size: 76.7025px;">ARFAN</span> 
 
     </div> 
 
     <div> 
 
      <span line-num="2" class="text-lines" style="font-size: 67.7685px;">HAIDER</span> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div id="image-out"></div>

Answer 2

이것은 그것은 새 버전에서 잘 작동하고
html2canvas의 새 버전을 설치하면됩니다 나를 위해 노력하고 있습니다. 감사합니다. 모두