问HTML2Canvas屏幕拍摄部
EN

Stack Overflow用户

提问于 2020-04-20 03:43:00

回答 1查看 1.4K关注 0票数 1

我正在将div元素转换为图像或屏幕截图。我在网上搜索过，发现了关于html2canvas的信息。我试过用，但没有运气。有人知道怎么做吗？这是我的源代码。

<html>
<head>
 <title> Screenshot </title>
</head>
<body>

  <div id="container">
    <h1> Screen shot me </h1>
  </div>
  <button onclick = "screenshot()"> Capture </button>
</body>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
 <script>
  function screenshot(){
    html2canvas(document.getElementById('container')).then(function(canvas){
      document.body.appendChild(canvas);
    })
  }
 </script>
</html>

我的错误一直说Uncaught TypeError: html2canvas(.).then不是HTMLButtonElement.onclick屏幕截图中的函数。我错过了什么吗？

我正在使用Laravel5.6和NPM。提前谢谢你！

laravel

html2canvas

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-20 04:21:57

测试Chrome，Firefox ok，IE 11需要增加2个额外的js库来支持承诺。

function takeSnapShot() {
	html2canvas(document.querySelector("#capture")).then(function(canvas) {
		document.querySelector("#newCanvas").appendChild(canvas);
	});
}

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> 
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; "> Screen shot me </h4>
</div>
<input type="button" value="Capture" onclick="takeSnapShot()"/>
<div id="newCanvas"></div>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61314798

复制

相似问题

问HTML2Canvas屏幕拍摄部
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML2Canvas屏幕拍摄部EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML2Canvas屏幕拍摄部
EN