html2canvas для длинного div - PullRequest
Новая
       9

html2canvas для длинного div

0 голосов
/ 18 ноября 2018

Здесь Я нашел эту скрипку онлайн для тестирования и для отправки вопроса.

Я пробовал пример на нескольких веб-сайтах в течение двух дней, но не повезло, кто-нибудь знает, как поместить длинную или большую группу html div / table в файл изображения?желательно формат PNG.

Если кто-то думает, что я пропустил несколько полезных сайтов, пожалуйста, предложите их мне, у приведенного ниже кода есть кнопка, она ничего не делает, когда я нажимаю на нее, она должна загрузить контент в виде изображения), так что я просто в отчаянии.

Ранее у меня был один, работающий с коротким div, поэтому, когда div больше, чем видимая область, он не будет взят.Поэтому я пытаюсь найти решение, которое может экспортировать div / таблицу в изображение на стороне клиента.HTML-код: 

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />

    <script data-require="jquery@2.0.1" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <span class="navbar-brand pull-left">Some Brand</span>
        </div>
      </div>
    </nav>
    <main class="container">
      <ol class="breadcrumb">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Fake Link</a>
        </li>
        <li class="active">Fake Page thing</li>
      </ol>
      <div class="jumbotron">
        <h1>Cool Export Test Page!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vehicula quam a dolor ullamcorper iaculis. In et laoreet est, commodo placerat lectus. Sed ac ullamcorper diam. Curabitur id sem leo. Proin non dictum massa. Aliquam et dui ante</p>
        <p>
          <button type="button" class="btn btn-primary btn-lg" id="button1">Export 1</button>
        </p>
      </div>
      <!--<img alt="" src="https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/evolving_google_identity_videoposter_006.jpg" class="image-responsive"/>-->
      <h3>Another header!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat.</p>
      <div class="panel panel-primary">
        <div class="panel-heading">Panel Heading</div>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Apples</th>
              <th>Bananas</th>
              <th>Carrots</th>
              <th>Donuts</th>
              <th>French Fries</th>
              <th>Grapes</th>
              <th>Ham</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="well">
        <h3>Okay this is probably enough data</h3>
        <p>Finish strong with some lorem ipsum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis tincidunt turpis. Praesent tempus suscipit lobortis. Nam viverra vehicula turpis, eu scelerisque lacus accumsan ac. Aliquam auctor vehicula nulla, a tincidunt lectus finibus non. Morbi eleifend auctor est ut maximus. Mauris nisl ante, euismod ac pellentesque eget, vestibulum non ex. Donec non nunc consectetur, volutpat erat in, ultricies arcu. Vivamus ac scelerisque lacus, eget porta lectus. Praesent ut tincidunt dolor.</p>
        <p>Nullam est tortor, tempus eget mollis at, hendrerit non erat. Pellentesque dictum nibh nisi, eu ullamcorper sapien fringilla sed. Nullam rutrum sed nisi vel rutrum. Suspendisse venenatis nibh libero, sit amet feugiat purus condimentum in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra congue metus, et pretium elit. Morbi ut leo rutrum, blandit ante eget, semper dui.</p>
        <p>Nunc sit amet tortor vitae erat mattis egestas. Quisque quis ultrices nulla. Mauris pretium tincidunt ipsum id semper. In ut congue ligula. Suspendisse porttitor feugiat molestie. Suspendisse vulputate consequat turpis, vel mollis ante ullamcorper et. Aliquam non leo velit. Nulla facilisi. Cras aliquet, augue tincidunt maximus blandit, justo augue feugiat lacus, ut euismod erat magna ut eros. Phasellus tincidunt ullamcorper sapien at accumsan. Fusce ut sapien pellentesque, blandit urna ut, tempus nibh. In eu tincidunt ipsum, ut pellentesque nisi. Aliquam erat volutpat. Duis a sagittis massa, eu mattis arcu.</p>
      </div>
    </main>
    <footer>
      <div class="container">This is a footer</div>
    </footer>
  </body>

</html>

CSS-код: 

/* Styles go here */
body {
    padding-top:70px;
    min-width: 850px;
    background: white;
}
footer {
    border-top: 1px solid dodgerblue;
    background: lightblue;
    padding:28px 0;
}
.table td {
  font-size: 12px;
}

JS: 

$('#button1').on('click', function () { //dl img btn
html2canvas($("#container"), {
onrendered: function(canvas) {
//var a = document.createElement('a');

var img = canvas.toDataURL("image/png");
//window.open(img);
//downloadURI(myImage, canvas.png);
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#button1").attr("download", "canvas.png").attr("href", newData);
}
});                         
});
  • дайте мне знать, если вы хотите увидеть предыдущий рабочийс коротким div, потому что я пытаюсь сделать этот пост коротким.
...