Question

以下是无效的代码。基本上我允许用户编辑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>

Answer 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标记。您可以在提交表单（然后必须添加<form>）或使用onclick的{{1}}属性时调用html2canvas。我将您的button输入元素更改为submit并将button方法绑定到其Submit属性。当用户单击该按钮时，屏幕截图将显示在表单下方。

html2canvas根本不工作

1 个答案: