Question

在我的网页中，我有一个像this这样的表，然后点击下面看到的按钮，我想要看一下该表的屏幕。那张桌子不是图片，我用HTML和CSS代码做了。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

<script language="javascript">
$('savetab').click(function() {
var testdiv = document.getElementById("testdiv");
    html2canvas($("#testdiv"), {
        onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
            var a= canvas.toDataURL("image/png");
            window.open(a);
        },       
    });
});
</script>

此代码采用testdiv的屏幕截图，这是包含该表的div。在这里，您可以看到“保存表”的代码＆＃39;按钮：

<p align="center"><input type="button" value="Save table" id="savetab1" /></p>

我有两个问题：

根据上面的代码，当我点击savetab时，脚本必须打开屏幕截图，但它没有。我在控制台中没有任何错误，我什么也看不见。
我想将该图片保存在我的服务器中。我准备了一个带有一些代码的php文件，可以在服务器上保存图片，我只需要传递那张照片。我在谷歌上阅读了很多东西，我发现我可以用 ajax 来做。你有什么好的例子吗？

Answer 1

在您的代码中，$('savetab')必须为$('#savetab1')

像这样改变你的剧本

 <script language="javascript">
    $(function(){
     $('#savetab1').on('click',function() {
     var testdiv = document.getElementById("testdiv");
        html2canvas($("#testdiv"), {
            onrendered: function(canvas) {
                // canvas is the final rendered <canvas> element
                var a= canvas.toDataURL("image/png");
                window.open(a);
            }       
        });
     });
   });
    </script>

将屏幕捕获保存在数据库中

1 个答案: