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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用html2canvas.js＆amp;的工作演示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);
          }
      });
  })
});

Haven没有尝试过第二个片段，但它应该有用。

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

2 个答案: