Захватите div при нажатии на него - PullRequest
1 голос
/ 11 мая 2019

Я хочу захватить элемент div при щелчке по нему с помощью библиотеки jquery & HTML2Canvas в среде, где у меня есть несколько div с тем же именем класса.

Это для страницы консоли накоторый я хочу дать пользователю дополнительный выбор для захвата div или нет, все просто не беспокоятся о прослушивателе событий здесь я использую.

$('.panel.panel-default', this).one("mouseenter", function() {
  html2canvas(document.getElementsByClassName("panel panel-default")).then(canvas => {
    //document.body.appendChild(canvas);
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
    console.log(image);  
    window.location.href = image;
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    <a> this is panel one</a><br><br>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-body">
    <a> this is panel two</a><br><br>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-body">
    <a> this is panel three</a><br><br>
  </div>
</div>

Фактический результат должен быть таким, как когда я нажимаю this is panel one, событие захватывает этот div в файл.

1 Ответ

1 голос
/ 11 мая 2019

Вам нужно просто передать правильный контекст

  $('.panel-body').on("click", function () {
        html2canvas(this).then(canvas => {
            //document.body.appendChild(canvas);
            var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            console.log(image);
            window.location.href = image;
        })
    });
...