1

だからここに私がやろうとしていることがあります：私はユーザーがカードの表現を見るページを持っています。その後、ユーザーはカードの保存をクリックします。次の関数が呼び出され、カードを保存するためにデータがコントローラーに返されますイメージとして。これには 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>

そのため、ページ上のボタンが関数のスクリーンショット('card') を呼び出し、これが起動する可能性がありますが、コンソールに次のエラーが表示されます。

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

(匿名関数)

何が起こっているのか教えてください!

4

1 に答える 1

1

html2canvas には、文字列 ID ではなく、dom 要素が必要であることを確認してください。使用してみてください：

function screenShot(id) {
    var elem = document.getElementById( id );
    html2canvas( elem, {...});
}
于 2014-02-06T08:07:41.930 に答える