Как правильно сохранить и загрузить содержимое div, используя JavaScript или jQuery - PullRequest
Новая
       1

Как правильно сохранить и загрузить содержимое div, используя JavaScript или jQuery

0 голосов
/ 26 января 2020

Я пытаюсь сохранить и загрузить div контент в виде изображения. Я прибег к этому решению , в котором предлагается использовать html2canvas.

. Я реализовал приведенный ниже код, но не могу получить содержимое div для сохранения и загрузки в виде изображения. Как я могу сделать это в jQuery или JavaScript?

Вот мой код: 

<!doctype html>
<html>

<head>

  <script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>

</head>

<body>
  <h1> Div Data to be Save and Download</h1>
  <div class="div1" id='div1'>
    <h2> Iam Div1</h2>
    <img src='images/div1_image.jpg' width='100' height='100'>

  </div><br/>
  <input type='button' id='but_screenshot' value='Download as Image' onclick='download();'><br/><br/>





  <!-- Script -->
  <script type='text/javascript'>
    function download() {
      // html2canvas(document.body).then(function(canvas) {

      html2canvas(document.getElementById('div1')).then(function(canvas) {

        document.body.appendChild(canvas);
      });
    }
  </script>

</body>

</html>

1 Ответ

0 голосов
/ 26 января 2020

Расширьте функцию download() следующим кодом: 

    function download() {
         html2canvas(document.getElementById("div1")).then(function(canvas) {
            document.body.appendChild(canvas);

            const image = canvas.toDataURL("image/png", 1.0);
            const link = document.createElement("a");

            link.download = "my-image.png";
            link.href = image;
            link.click();
      });
     }

Вы получите его в виде загруженного файла после нажатия enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...