HTML2Canvas Скриншот Div - PullRequest
Новая
       9

HTML2Canvas Скриншот Div

0 голосов
/ 20 апреля 2020

Я конвертирую элемент div в изображение или скриншот. Я искал по всему inte rnet и узнал о 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 (...). Тогда это не функция на скриншоте в HTMLButtonElement.onclick . Я что-то пропустил?

Я использую Laravel 5.6 с NPM. Заранее спасибо!

1 Ответ

1 голос
/ 20 апреля 2020

Протестировано Chrome, Firefox ок, 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>
...