Как автоматически загрузить скриншот с помощью html2Canvas - PullRequest
Новая
       9

Как автоматически загрузить скриншот с помощью html2Canvas

0 голосов
/ 15 мая 2018

У меня есть холст, на котором показан график, и я пытаюсь сделать скриншот холста с помощью html2canvas () с кодом ниже: 

<div class="chartContainer" id="chart1"></div>
<div id="displayCanvas" style="display:none;" class="stx-dialog"></div>

html2canvas($('#chart1'),{onrendered:function(canvas1) 
{$('#displayCanvas').append(canvas1)}});

Здесь, когда загружается контейнер диаграммы, он использует div с идентификатором "displayCanvas" и добавляет снимок экрана холста.

Как загрузить скриншот отображаемого холста? Я уже пытался использовать что-то вроде ниже, чтобы загрузить изображение: 

var link = document.createElement('a');
link.download = stx.chart.symbol+".png";
link.href = stx.chart.canvas.toDataURL("png");
link.click();

, но он загружает только данные на холсте в виде изображения без фона (он не загружает скриншот, а только данные), который при открытии после загрузки показывает черный экран с данными в нем. Может кто-нибудь помочь мне, как загрузить изображение непосредственно со скриншота, взятого из html2Canvas ()?

Ответы [ 2 ]

0 голосов
/ 11 июня 2019

Это сработало для меня

HTML: 

<button id="btn">Capture</button>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>


Javascript: 

const capture = () => {
  const body = document.querySelector('body');
  body.id = 'capture';
  html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);
  }).then(() => {
    var canvas = document.querySelector('canvas');
    canvas.style.display = 'none';
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    var a = document.createElement("a");
    a.setAttribute('download', 'myImage.png');
    a.setAttribute('href', image);
    a.click();
  });
};

const btn = document.getElementById('btn');
btn.addEventListener('click', capture)

Вот JSFiddle

Я знаю, что прошло какое-то время, но, надеюсь, это кому-нибудь поможет:)

0 голосов
/ 15 мая 2018

Если на изображении черный фон, ваша диаграмма должна быть видна на экране. Потому что html2 может быть как снимок экрана. Если вы хотите конвертировать данные на холст, вы должны быть уверены, что данные отображаются на экране.

...