一尘不染

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

javascript

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

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

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

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


阅读 667

收藏
2020-04-25

共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());

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

2020-04-25