如何使用JavaScript拍摄div的屏幕截图？

Question

如何使用JavaScript拍摄div的屏幕截图？我正在构建一个叫做“HTML测试”的东西。它完全运行在JavaScript上，非常酷。最后，会弹出一个结果框，上面写着“您的结果”：它显示了他们花了多少时间，得到了多少百分比，以及他们从10个中得到了多少个问题。我希望有一个按钮，上面写着“捕捉结果”，并让它以某种方式拍摄一个屏幕截图或div的什么东西，然后显示在页面上捕捉到的图像，他们可以右击和“另存图像为”。我真的很乐意这样做，这样他们就可以和别人分享他们的成果了。我不希望他们“复制”结果，因为他们可以很容易地改变。如果他们改变了图像中的内容，哦，好吧。有人知道怎么做这件事或类似的事吗？

Answer 1

不，我不知道如何“屏幕截图”一个元素，但你可以做的是将测试结果绘制到一个画布元素中，然后使用HTMLCanvasElement对象的toDataURL函数以获得data:带图像内容的URI。

完成测试后，执行以下操作：

var c = document.getElementById('the_canvas_element_id');var t = c.getContext('2d');
/* then use the canvas 2D drawing functions to add text, etc. for the result */

当用户单击“Capture”时，执行以下操作：

window.open('', document.getElementById('the_canvas_element_id').toDataURL());

这将打开一个新的选项卡或窗口与“屏幕截图”，允许用户保存它。没有办法调用“另存为”对话框的类型，所以在我看来，这是最好的方法。

Answer 2

这是“达森”的扩展回答，使用HTML 2画布和FileSaver.js.

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;


                canvas.toBlob(function(blob) {
                    saveAs(blob, "Dashboard.png"); 
                });
            }
        });
    });});

此代码块等待带有id的按钮。btnSave被点击。如果是，则转换widgetdiv到一个画布元素，然后使用SaveAs()FileSaver接口(通过不支持它的浏览器中的FileSaver.js)将div保存为名为“Dashboard.png”的图像。

本文提供了此工作的一个示例。小提琴.