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

javascript jquery html

2022-08-30 01:07:27

我正在构建一个名为“HTML测验”的东西。它完全在JavaScript上运行，非常酷。

最后，弹出一个结果框，上面写着“您的结果：”，它显示他们花了多少时间，他们得到了多少百分比，以及他们从10个问题中得到了多少问题。我希望有一个按钮，上面写着“捕获结果”，并让它以某种方式截取屏幕截图或div的某些内容，然后只显示页面上捕获的图像，他们可以右键单击并“将图像另存为”。

我真的很想这样做，这样他们就可以与他人分享他们的结果。我不希望他们“复制”结果，因为他们可以很容易地改变这一点。如果他们改变了图像中所说的内容，哦，好吧。

有没有人知道一种方法来做到这一点或类似的事情？

答案 1

不，我不知道有没有办法“截图”一个元素，但你可以做的是将测验结果绘制到画布元素中，然后使用对象的函数来获取包含图像内容的URI。HTMLCanvasElementtoDataURLdata:

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

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

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

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

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

答案 2

这是@Dathan的答案的扩展，使用html2canvas和FileSaver.js。

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


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

此代码块等待单击带有 ID 的按钮。当它时，它将 div 转换为 canvas 元素，然后使用 saveAs（） FileSaver 接口（通过 FileSaver.js在本机不支持它的浏览器中）将 div 另存为名为“Dashboard.png”的图像。btnSavewidget

这项工作的一个例子可以在这个小提琴上找到。