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

Question

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

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

我真的很想这样做，以便他们可以与他人分享他们的成果。我不希望他们“复制”结果，因为他们可以轻松更改它。如果他们更改图片中的内容，那就好。

有谁知道做到这一点的方法或类似的方法？

Answer 1

不，我不知道“截屏”元素的方法，但是您可以做的是将测验结果绘制到canvas元素中，然后使用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 */

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

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

这将打开带有“屏幕截图”的新标签或窗口，允许用户保存它。没有办法调用“另存为”对话框，所以我认为这是您可以做的最好的事情。