html2canavas error in mvc 4 project

Question

So here is what im trying to do: I have a page where the user sees a representation of a card after which the user clicks save card the following function is called and the data should return to my controller in order for me to save the card as an image. I use html2canvas for this and here is the code:

<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>

so a button on the page calls the function screenshot('card') and this could fires up but i get the following error in the console:

Uncaught TypeError: Object c has no method 'getElementsByTagName' html2canvas.js:2191 _html2canvas.Preload html2canvas.js:2191

(anonymous function)

Please let me know whats happening?!

Answer 1

Pretty sure html2canvas requires a dom element, not a string id. Try using:

function screenShot(id) {
    var elem = document.getElementById( id );
    html2canvas( elem, {...});
}