如何从html2canvas中提取照片？

Question

我想使用html2canvas下载照片。我已经尝试使用javascript和HTML。因此，我进行了下载过程。但是，jpg文件中没有图像。所以，我想解决这个问题。

function PrintDiv(div)  {
  html2canvas(document.getElementById("photo")).then(function(canvas) {
    var img = canvas.toDataURL();
    var link = document.createElement("a");
    link.href = canvas.toDataURL("image/jpeg").replace("image/jpeg",
      "image/octect-stream");
    document.body.append(link);
    link.download = 'polaroid.jpg'
    link.click();
  })
}

$('#blobButton').click(function() {
  PrintDiv($('#photo'));
})

.polaroid {
  position: relative;
  width: 600px;
  margin: 20px;
  -webkit-box-shadow: 3px 3px 3px #777;
  -moz-box-shadow: 3px 3px 3px #777;
  box-shadow: 3px 3px 3px #777;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 1.0;
  background-color: white;
}

.polaroid img {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  padding-bottom: 10px;
}

.polaroid div {
  padding-bottom: 11px;
  margin-left: 2em;
  margin-right: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="polaroid" id="photo">
  <img src="https://file.mk.co.kr/meet/neds/2017/03/image_readtop_2017_163255_14890579952804146.jpg" />
  <div class="text">
    <p>2013년02월27일 오후3:00</p>
  </div>

  <div class="to">TO {{photo.info.to_name}}</div>

  <div class="message" style="text-align:center">{{photo.info.message}}</div>

  <div class="from" style="text-align:right">FROM: {{photo.info.from_name}}</div>
</div>

<button id="blobButton">DOWNLOAD</button>

我想下载如下照片。