Ошибка html2canavas в проекте mvc 4

Итак, вот что я пытаюсь сделать: у меня есть страница, на которой пользователь видит представление карты, после чего пользователь нажимает кнопку «Сохранить карту», ​​вызывается следующая функция, и данные должны вернуться на мой контроллер, чтобы я мог сохранить карту как образ. Я использую для этого html2canvas и вот код:

<div class="row download-card">
<div class="span12">
    <h2>Congratulations!</h2>
    <h3>You may download your MyCard</h3>
    <div id="card" class="card center">
        <ul>
            <li style="float: left;position: absolute;display: block;padding-top: 200px; padding-left: 200px;text-align: left;font-family:arial;color:white;font-size:x-large;">@name @lastname<span style="padding-left:90px;font-size:x-large; color:#ffffff;font-family:arial;">@CardNo</span></li>
            <li style="float: left;position: absolute;display: block;padding-top: 230px; padding-left: 200px;text-align: left;color:white;">Member since: @yearRegistered <span style="color:white; padding-left:10px;font-family:arial;">Valid Thru: @validThru</span></li>
        </ul>
    </div>
    <button class="btn" type="button" onclick="screenShot('card')">Download</button>
</div>
</div>

<script src="~/assets/userpanel/js/html2canvas.js"></script>
<script type="text/javascript">


function screenShot(id) {
html2canvas(id, {
    proxy: "https://html2canvas.appspot.com/query",
    onrendered: function(canvas) {

        var img = canvas.toDataURL("image/png");
        var output = img.replace(/^data:image\/(png|jpg);base64,/, "");
        var output = encodeURIComponent(img);

        var Parameters = "image=" + output + "&filedir=" + cur_path;
        $.ajax({
            type: "POST",
            url: "Profile/savecardPNG",
            data: Parameters,
            success : function(data)
            {
                console.log("screenshot done");
            }
        }).done(function() {
            //$('body').html(data);
        });

    }
});
}
</script>

поэтому кнопка на странице вызывает скриншот функции («карта»), и это может сработать, но я получаю следующую ошибку в консоли:

Uncaught TypeError: объект c не имеет метода getElementsByTagName html2canvas.js:2191 _html2canvas.Preload html2canvas.js:2191

(анонимная функция)

Пожалуйста, дайте мне знать, что происходит?!


person Tondar    schedule 06.02.2014    source источник


Ответы (1)


Почти уверен, что html2canvas требует элемент dom, а не строковый идентификатор. Попробуйте использовать:

function screenShot(id) {
    var elem = document.getElementById( id );
    html2canvas( elem, {...});
}
person Tom McQuarrie    schedule 06.02.2014
comment
Я только что проверил поврежденный html и, к счастью, нет! - person Tondar; 06.02.2014
comment
В HTML-коде, который вы разместили выше, отсутствует закрывающий тег div. если это не полный html, вы должны отредактировать свой пост, чтобы включить полный html, или еще лучше сделать jsfiddle, чтобы мы могли его увидеть. - person Tom McQuarrie; 06.02.2014
comment
о боже, я пропустил конечный тег div при вставке! так что html в порядке. - person Tondar; 06.02.2014