Javascript HTML2Canvas 5.0不保存背景图像

我第一次学习JS和前端开发。作为我的项目的一部分，我想要一个按钮，当按下时，将转换成一个图片的html部分。对于这个任务，我决定使用HTML2Canvas库，因为我听说过很多关于它的好东西，而且它的设置看起来相当简单

使用HTML2Canvas时，除了背景图像，我似乎可以保存所有内容。当搜索有关此问题的信息时，其他人建议使用5.0版本而不是4.1版本，但我仍然遇到此问题。谁能给我指出正确的方向吗

我的代码贴在下面

HTML

JS

var saveIt=function（）{
html2canvas（document.getElementById（“box”）
), {
onrendered：函数（画布）{
document.body.appendChild（画布）；
leCanvas=document.getElementsByTagName（“画布”）[0]；
var img=leCanvas.toDataURL（“image/png”）；
document.write（'保存的html png:
'）；
},
宽度：1920，
身高：1080
});
}

<div class="myContainer" id="box") > </div>

<script src="https://github.com/niklasvh/html2canvas/releases/download/v0.5.0-beta4/html2canvas.js"></script>

<a href="#" onClick="saveIt()">save Image 1</a> 

.myContainer {
    width:230px; height:230px; line-height:4em;
    border:5px solid green;
    }
    #box{
       background-image: url(https://source.unsplash.com/random/230x230)
    }

canvas {
  position: absolute;
  top: 0;
  left: 400px;
  visibility: hidden;
}

var saveIt = function() {
  html2canvas(document.getElementById("box"
), {
  onrendered: function(canvas) {
      document.body.appendChild(canvas);
      leCanvas = document.getElementsByTagName("canvas")[0];
      var img  = leCanvas.toDataURL("image/png");
      document.write('<span style="font:14px normal Helvetica, Arial; font-weight: bold; color:#13a6f5; margin-left:16px">Saved html png:</span> <br /><img src="'+img+'"/>');
  },
  width: 1920,
  height: 1080
});
}