使用 Html2Canvas 的文本区域屏幕截图

Question

我正在使用 html2canvas 库截取屏幕截图。这是我的 example.

点击to image按钮时，会截取文本区域的截图。

目前它忽略滚动条文本，只截取在文本区域可见的屏幕截图。我想截取整个 textarea 文本的屏幕截图。

window.takeScreenShot = function() {
  html2canvas(document.getElementById("target"), {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    },
    width: 320,
    height: 220
  });
}

谁能帮我解决这个问题？非常感谢您的帮助。

谢谢

Answer 1

在截取屏幕截图之前，请设置文本区域高度以包含所有内容。然后在(demo):

之后重新设置高度

window.takeScreenShot = function() {
  var textarea = document.getElementById("target");
  textarea.style.height = textarea.scrollHeight + "px";
  html2canvas(textarea, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
      textarea.style.height = "";
    },
    width: 320,
    height: textarea.offsetHeight
  });
}

使用 Html2Canvas 的文本区域屏幕截图

Textarea screenshot using Html2Canvas

html

javascript

jquery

screenshot

html2canvas