Учебник html2canvas?

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

Не обижайтесь на Герцена, он сделал отличный script, но документация неполная, поэтому она бесполезна.

Я посмотрел на JSFeedback, но весь script (который мне пришлось "украсть" из источника HTML) работает только с его версией html2canvas, которая, по его словам, не готова к открытой работе.

Любая помощь будет по-настоящему оценена - Apparatix.

Ответ 1

html2canvas в основном принимает все объекты DOM, которые вы указали, - все дети, и их дети и т.д. - и реплицирует их в объекте Canvas (найденном в переменной холста, переданном функции) на основе их различных характеристик, включая границы, содержимое, стили и т.д. canvas.toDataURL() преобразует содержимое этого Canvas в поток символов, которые представляют изображение, которое может использоваться как src в теге, то есть

<img src=imgdataurl>

или установка фонового изображения через javascript/jquery, например:

$('#someDiv').css('background-image','url('+imgdataurl+')')

Если он не работает для вас, возможно, вы указываете неправильный родительский элемент DOM - вы можете попробовать $('body') вместо $('# myObj') и посмотреть, что-нибудь произойдет вверх.

Ответ 2

Дайте этому вихрь -

В вашем index.html добавьте следующие файлы javascript:

<script type="text/javascript" language="javascript" src="js/jquery.js">
</script>
 <script type="text/javascript" language="javascript" src="js/html2canvas.min.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.plugin.html2canvas.js">
</script>

Вы можете загрузить последние два из: https://github.com/downloads/niklasvh/html2canvas/v0.34.zip

В вашем Javascript вы можете затем закодировать (замените #myObjectId на действительный селектор JQuery):

$('#myObjectID').html2canvas({
    onrendered : function(canvas) {
    var img = canvas.toDataURL();
    // img now contains an IMG URL, you can do various things with it, but most simply:
        $('<img>',{src:img}).appendTo($('body'));
            }
        });