HTML2canvas 和 Canvas2image，下载的截图不显示我的 HTML 图像

Question

我一直在处理要转换为图像的 HTML 页面。

我一直在使用 html2canvas 和 canvas2image 脚本并在此处获取此代码 http://jsfiddle.net/8ypxW/3/，这使我能够创建一个按钮，该按钮将截取屏幕截图并将我的 HTML 页面下载为图像。

我遇到的问题是我下载的屏幕截图显示了我的文本，但没有显示我的图像，即使它们来自同一个来源。我不确定这是否是我的 HTML、HTML2canvas 或 canvas2image 的问题。

我的示例尚未上线，但我的代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<script src="Canvas2Image.js"></script>



<div id="wrapper" style="background-color: white"; width="1000px" height="900px">

<img src="header.jpg" width= "900px">
tecno diagnostics


</div><!---- End Wrapper ---->


<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<div id="img-out"></div>


<script type="text/javascript">
$(function() { 
  $("#btnSave").click(function() { 
    html2canvas($("#wrapper"), {
        onrendered: function(canvas) {
            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
            // Clean up 
            //document.body.removeChild(canvas);
        }
    });
});
}); 
</script>

如果有人可以帮助我或指出正确的方向，我将不胜感激。

提前致谢

Answer 1

document.querySelector('button').addEventListener('click', function() {
  html2canvas(document.querySelector('.specific'), {
    onrendered: function(canvas) {
      // document.body.appendChild(canvas);
      return Canvas2Image.saveAsPNG(canvas);
    }
  });
});

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  background-color: #fff;
  padding-left: 15px;
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
h1 {
  font-size: 36px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1 small {
  font-size: 65%;
  font-weight: 400;
  line-height: 1;
  color: #777;
  display: block;
  padding-top: 15px;
}
.specific {
  background-color: #fff;
}
p a {
  padding: 5px;
}

<script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="specific">
  <h1>Click to Take a Screenshot & Download it! <small>using html2canvas.js + canvas2image.js</small></h1> 
  <p>This is a simple demo.</p>
  <p>Use html2canvas.js to take a screenshot of a specific div and then use canvas2image.js to download the screenshot as an image locally to your filesystem.</p>
  <button type="button" class="btn btn-default">Take a Screenshot!</button>
  <p>References: <a href="http://html2canvas.hertzen.com/">html2canvas.js</a><a href="https://github.com/SuperAL/canvas2image">canvas2image.js</a>
  </p>
</div>

使用html2canvas.js 和canvas2image.js 的工作演示：

Click to Take a Screenshot & Download it locally!

Answer 2

您将 canvas 对象附加到 DOM，这在这种情况下没有多大意义。您要么希望将渲染图像转换为 base64，然后将其附加到 img 标签中的 DOM，要么只需调用 saveAsPng() 方法将图像保存到文件系统。

如果您想将图像附加到 DOM，试试这个：

html2canvas(element, {
    onrendered: function(canvas) {
      var img = canvas.toDataURL("image/png");
      $('body').append('<img src="'+img+'"/>');
    }
  });

或者这个，如果你想保存的话。：

$(function() { 
  $("#btnSave").click(function() { 
      html2canvas(document.body, {
          onrendered: function(canvas) {
              return Canvas2Image.saveAsPNG(canvas);
          }
      });
  })
});

第二个sn-p没试过，但是应该可以的。