我正在构建一个称为“ HTML测验”的东西。它完全在JavaScript上运行,非常酷。
最后,弹出一个结果框,显示“您的结果:”,它显示了他们花费了多少时间,他们得到了多少百分比以及他们从10个问题中得出了多少个问题。我想有一个按钮,上面写着“捕获结果”,并使其以某种方式截取屏幕截图或div,然后仅在页面上显示捕获的图像即可在其中单击鼠标右键并“将图像另存为”。
我真的很想这样做,以便他们可以与他人分享他们的成果。我不希望他们“复制”结果,因为他们可以轻松更改它。如果他们更改图片中的内容,那就好。
有谁知道做到这一点的方法或类似的方法?
不,我不知道“截屏”元素的方法,但是您可以做的是将测验结果绘制到canvas元素中,然后使用HTMLCanvasElement对象的toDataURL函数获取data:包含图像内容的URI。
HTMLCanvasElement
toDataURL
data:
测验完成后,请执行以下操作:
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());
这将打开带有“屏幕截图”的新标签或窗口,允许用户保存它。没有办法调用“另存为”对话框,所以我认为这是您可以做的最好的事情。