2

这是不起作用的代码。基本上我允许用户在 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>
4

2 回答 2

5

我稍微更改了您的代码，它可以工作：

<!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>）或使用. 我将您的输入元素更改为并将方法绑定到其属性。当用户单击该按钮时，屏幕下方会出现在表单下方。onclickbuttonsubmitbuttonSubmitonclick

于 2013-12-28T22:50:48.407 回答
0 
只需使用此代码






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>
于 2022-02-13T08:52:20.880 回答