html2canvas возвращает недопустимое изображение, когда высота тела превышает 30000 пикселей.

Библиотека html2canvas ведет себя странно, когда мне нужно захватить элемент управления, размещенный на теле html, длина которого превышает 30000 пикселей. Мой контроль небольшой (100 х 100) - но сценарий не работает, когда тело длинное.html2canvas возвращает недопустимое изображение, когда высота тела превышает 30000 пикселей.

Вот два фидель один работает другой один не работает разные размеры тела

$(document).ready(function() { 
 
    $('#test').on('click', function() { 
 
    html2canvas(document.getElementById('container'), { 
 
     onrendered: function(canvas) { 
 
     document.body.appendChild(canvas); 
 
     }, 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> 
 

 
<body style="height:40000px"> 
 

 
<button id="test">test</button> 
 

 
<div id='container'> 
 
    <img style='width:200px; height:200px;' src="www.example.com/example.jpg"> 
 
</div> 
 
</body>

В приведенном выше примере библиотека возвращает изображение, но данные недействительны. Если изменить высоту тела, чтобы что-то вроде 20000 пикселей, все работает отлично

источник

2016-05-30 azad

Пример не работает над FF с 'top' выше, чем' 32741px'. Chrome это число увеличивается до '32746px'. У IE11, похоже, нет этой проблемы. Поэтому я думаю, что это браузер. Попробуйте отправить вопрос в Html2Canvas – Justinas

@ Justinas, почему это происходит, не можем ли мы получить изображение при размере документа больше 32741 пикселей. У меня динамически растущий документ. – azad

Я не знаю, я просто сделал быстрый тест. – Justinas

, наконец, я нашел, почему это происходит на основе this stackoverflow answer

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

Чтобы решить эту проблему, я клонировал элемент, который должен быть передан на изображение и установлен в верхнюю часть документа ('position: absolute; top: 0') и получить изображение из него. после получения изображения я удалил этот клонированный элемент. не забудьте сделать это, нам нужно установить свойство width и height для параметров библиотеки «html2canvas».

I мой случай мой элемент максимальная высота 1000px, и я установил 3000, 3000, поэтому он может охватывать весь элемент, который расположен сверху.

примечание: не устанавливайте невидимые или не скрывайте клонированный элемент.

html2canvas($parentNode, { 
          width: 3000, 
          height:3000, 
          onrendered: function(canvas) { 
           console.log(canvas.toDataURL()); 
           $parentNode.remove(); //removing cloned element 
           } 
          });

источник

2016-06-08 05:05:48 azad

html2canvas возвращает недопустимое изображение, когда высота тела превышает 30000 пикселей.

ответ

Смежные вопросы