html2canvas 根本不工作答案

【问题标题】：html2canvas not working at allhtml2canvas 根本不工作
【发布时间】：2013-12-28 22:20:30
【问题描述】：

这是无效的代码。基本上我允许用户在 div 中编辑一些文本，然后显示它的屏幕截图。有人可以告诉它为什么不起作用吗？

<!doctype html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="main.css" />
  <title>Poster</title>
</head>
<body>
  <div id="main_image">
    <img src="image.jpg" id= "image"/>
    <div id="user_text">IT IS TOTALLY AWESOME</div>
  </div>
  <div id="edit_text_box">
    <textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
    <div id="change_size">
      <span style="float: left;">FONT-SIZE : </span>
      <button id="decrease_size">-</button>
      <button id="increase_size">+</button>
    </div>
    <input id="submit" type="submit" value="SUBMIT" />
  </div>
    <script type="text/javascript">
    window.onload = function() {
      html2canvas( [ document.body ], {
      onrendered: function( canvas ) {
        document.body.appendChild( canvas );
      }
    });
  };
  </script>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>

【问题讨论】：

标签： html2canvas

【解决方案1】：

我稍微修改了你的代码，它可以工作了：

<!doctype html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="main.css" />
  <title>Poster</title>
  <script type="text/javascript" src="html2canvas.js"></script>
  <script type="text/javascript">
    var Submit = function() {
      html2canvas(document.body, {
        onrendered: function(canvas) {
          document.body.appendChild(canvas);
        }
      });
  };
  </script>
</head>
<body>
  <div id="main_image">
    <img src="image.jpg" id= "image"/>
    <div id="user_text">IT IS TOTALLY AWESOME</div>
  </div>
  <div id="edit_text_box">
    <textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
    <div id="change_size">
      <span style="float: left;">FONT-SIZE : </span>
      <button id="decrease_size">-</button>
      <button id="increase_size">+</button>
    </div>
    <button onclick="Submit();" >Submit</button>
  </div>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>

首先，我添加了 html2canvas JavaScript 文件 (<script type="text/javascript" src="html2canvas.js"></script>)。您可以在https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js 下载它并将该文件放在与您的 HTML 相同的文件夹中。显然，您正在尝试创建类似表单的东西，但您的代码中没有 form 标记。您可以在提交表单时调用 html2canvas（然后必须添加<form>）或使用button 的onclick 属性。我将您的 submit 输入元素更改为 button 并将 Submit 方法绑定到其 onclick 属性。当用户单击按钮时，屏幕下方会出现屏幕截图。

【讨论】：

非常感谢你！是的，实际上我之前已经添加了 onClick 事件，但在那之后我进行了很多实验以使其工作，所以这就是它不在这里的原因。所以基本上我必须链接那个文件！会记住这一点。你救了我！

【解决方案2】：

只需使用此代码



document.querySelector('button').addEventListener('click', function() {
  html2canvas(document.querySelector('.specific'), {
    onrendered: function(canvas) {
      // document.body.appendChild(canvas);
      return Canvas2Image.saveAsPNG(canvas);
    }
  });
});
.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>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。