Question

按照此html2canvas example的示例，我尝试将内容从textarea转换为图像。

以下代码不起作用。使用包含.needs-to-grow { font-size: 18px; }的textarea，点击＆＃34;以图像＆＃34;按钮生成一个空图像。有趣的是，如果我将函数<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="needs-to-grow" data-end="1000">0</div>中的第一行更改为<h2>Hi you</h2>，则会生成图像。不知道为什么。

takeScreenShot

Answer 1

我删除了width和height属性并让它发挥作用。

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  </head>
   <body>
   <!-- from http://jsfiddle.net/alperenozlu/sodofkcs/ -->
    <textarea cols="80" rows="15" id="input">
    </textarea><br/>
    <div id="target">
      Lorem ipsum dolor sit amet.
    </div>

    <button onclick="takeScreenShot()">to image</button>
    <script>
      takeScreenShot = function() {
          document.getElementById("target").innerHTML = document.getElementById("input").value;
          html2canvas(document.getElementById("target"), {
              onrendered: function(canvas) {
            document.body.appendChild(canvas);
              }
          });
      }
    </script>
  </body>
</html>

为什么不渲染图像

1 个答案: