我正在构建一个叫做“HTML 测验”的东西。它完全在 JavaScript 上运行,非常酷。
最后,会弹出一个结果框,上面写着“你的结果:”,它显示了他们花了多少时间,他们得到了多少百分比,以及他们在 10 个问题中答对了多少。我想要一个显示“捕获结果”的按钮,并让它以某种方式截取 div 的屏幕截图或其他内容,然后只显示在页面上捕获的图像,他们可以右键单击并“将图像另存为”。
我真的很想这样做,以便他们可以与他人分享他们的结果。我不希望他们“复制”结果,因为他们可以很容易地改变它。如果他们改变图片中的内容,那好吧。
有没有人知道这样做或类似的方法?
最佳答案
不,我不知道“截屏”元素的方法,但您可以将测验结果绘制到 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());
这将打开一个带有“屏幕截图”的新选项卡或窗口,允许用户保存它。没有办法调用“另存为”对话框,所以在我看来这是你能做的最好的事情。
https://stackoverflow.com/questions/6887183/