HTML2canvas和Canvas2image，下载的屏幕截图不显示我的HTML图像 [英] HTML2canvas and Canvas2image, downloaded screenshot doesn't show my HTML images

问题描述

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

I've been working on a HTML page that I want to convert into an image.

我一直在使用html2canvas和canvas2image脚本，并采用了以下代码 http://jsfiddle.net/8ypxW/3/在这里，我可以创建一个按钮，该按钮将截取屏幕截图并将HTML页面下载为图像.

I have been using the html2canvas and canvas2image scripts and taken this code http://jsfiddle.net/8ypxW/3/ here that has allowed me to create a button that will take a screenshot and download my HTML page as an image.

我遇到的问题是，即使下载的屏幕截图图片来自同一来源，但我的文字却显示，但我的图片却没有.我不确定我的HTML，HTML2canvas或canvas2image是否有问题.

The problem I'm having is that my downloaded screenshot image shows my text but not my image, even though they are from the same origin. I'm not sure if it's a problem with my HTML, HTML2canvas or canvas2image.

我的示例尚未发布，但代码如下:

My example is not live yet but my code is below:

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

如果有人能帮助我或指出正确的方向，那将不胜感激.

If anyone can help me out or point me in the right direction that would be much appreciated.

预先感谢

推荐答案

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 :

单击以获取屏幕快照&在本地下载！

这篇关于HTML2canvas和Canvas2image，下载的屏幕截图不显示我的HTML图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！