使用html2canvas不能使用以前的版本获取div的图像

Question

我想使用div制作html2canvas的图片，但我的代码效果不佳。 只需安装新版本的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不同，它只获得一半图像未满。这段代码有什么问题。 ？

更新

输出看起来像这张图片。

Answer 1

以下代码对我有用

＆＃13;

＆＃13;

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);
  }
});

＆＃13;

#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';
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;