Ориентация на конкретный DIV с html2canvas

Question

Я использую html2canvas.js Герцен, и попытался настроить пример кода, так что он нацелен на конкретный DIV вместо всего тела документа:

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    document.body.appendChild(canvas); 
    } 
}); 

Образец из того, что я пытаюсь выполнить, находится здесь: https://jsfiddle.net/ununkg3a/

При нажатии кнопки «Сохранить PNG» я хочу добавить изображение генерируемых квадратов jQuery, которые я нацелил в конкретном div. В коде кажется, что он что-то добавляет, но у него нет высоты. Когда я пытаюсь установить высоту с выходом, она по-прежнему не работает должным образом.

Невозможно ли выполнить что-то подобное? Всякий раз, когда я изменяю document.body на другой элемент, скриншот больше не отображается, хотя он выполняет рендеринг, когда я возвращаю его в document.body. Кто-то сказал мне, что мне придется обрезать изображение с помощью js, но это кажется немного взломанным.

Answer 1

Это может: это первый атрибут. (fiddle)

Пример:

html2canvas(document.getElementById('test')).then(function(canvas) { 
    document.body.appendChild(canvas); 
}); 

---

В вашем примере, canvas2html не может узнать высоту вашего дел. Из-за этого он возвращается к высоте 0px, поэтому вы ничего не увидите.

Дайте ширину #art, тогда вы можете подсчитать высоту вручную и использовать ее.

Математический пример:
art_square_width = 10px
art_square_height = 10px
art_square_amount = 500
art_width = 250px
art_height = art_width/(art_width/art_square_width) * art_square_height = 200px

(fiddle)