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>

所以页面上的一个按钮调用函数 screenshot('card') 这可能会启动，但我在控制台中收到以下错误：

未捕获的类型错误：对象 c 没有方法 'getElementsByTagName' html2canvas.js:2191 _html2canvas.Preload html2canvas.js:2191

（匿名函数）

请让我知道发生了什么？！

4

1 回答 1

1

很确定 html2canvas 需要一个 dom 元素，而不是字符串 id。尝试使用：

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