Menu
I am building something called the "HTML Quiz". It's completely ran on JavaScript and it's pretty cool.
At the end, a results box pops up that says "Your Results:" and it shows how much time they took, what percentage they got, and how many questions they got right out of 10. I would like to have a button that says "Capture results" and have it somehow take a screenshot or something of the div, and then just show the image captured on the page where they can right click and "Save image as."
I really would love to do this so they can share their results with others. I don't want them to "copy" the results because they can easily change that. If they change what it says in the image, oh well.
Does anyone know a way to do this or something similar?
640
Press the Volume Down rocker and the Power button at the same time. Note: Some Android devices may have different button combinations or require an app to take a screenshot. Hold the buttons until the screenshot is taken. Preview your screenshot in your gallery.
Inspect the element you wish to capture. Open the Command Menu with Cmd + Shift + P / Ctrl + Shift + P. Type in screenshot within the Command Menu. You can now capture the screenshot of only the specific element, a viewport screenshot, or a full-page screenshot.
In HTML body, create div element whose screenshot you need to take, and also another div, where you will save the output. <div id="photo" > <h1>Test Screenshot</h1> Hello everyone!
The idea is to take the screenshot of first div with the click of a button, and store its result in second div. We will add the button in next step. 3. Add Button Next, create a button inside the div which when clicked will take screenshot. We also add an onclick () handler for the button. <button onclick="takeshot ()"> Take Screenshot </button>
If you need a pixel-perfect representation of what your user is looking at and don't mind the sometimes obtuse permissions popup, the getDisplayMedia API is a good place to start. If you want to take semi-accurate screenshots quickly with no external service dependency, html2canvas could be the right choice for you.
Using HTML2canvas for client-side screenshots is one of the most popular methods. Generate screenshots with getDisplayMedia - which is used as the screen sharing API. You can capture a still image from a video, which is essentially like screen sharing, like a screen sharing image, using JavaScript.
No, I don't know of a way to 'screenshot' an element, but what you could do, is draw the quiz results into a canvas element, then use the HTMLCanvasElement object's toDataURL function to get a data: URI with the image's contents.
When the quiz is finished, do this:
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 */
When the user clicks "Capture", do this:
window.open('', document.getElementById('the_canvas_element_id').toDataURL());
This will open a new tab or window with the 'screenshot', allowing the user to save it. There is no way to invoke a 'save as' dialog of sorts, so this is the best you can do in my opinion.
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
