Using HTML5/Canvas/JavaScript to take in-browser screenshots
JavaScript can read the DOM and render a fairly accurate representation of that using canvas
. I have been working on a script which converts HTML into a canvas image. Decided today to make an implementation of it into sending feedbacks like you described.
The script allows you to create feedback forms which include a screenshot, created on the client's browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
It does not require any rendering from the server, as the whole image is created on the client's browser. The HTML2Canvas script itself is still in a very experimental state, as it does not parse nearly as much of the CSS3 attributes I would want it to, nor does it have any support to load CORS images even if a proxy was available.
Still quite limited browser compatibility (not because more couldn't be supported, just haven't had time to make it more cross browser supported).
For more information, have a look at the examples here:
http://hertzen.com/experiments/jsfeedback/
edit
The html2canvas script is now available separately here and some examples here.
edit 2
Another confirmation that Google uses a very similar method (in fact, based on the documentation, the only major difference is their async method of traversing/drawing) can be found in this presentation by Elliott Sprehn from the Google Feedback team:
http://www.elliottsprehn.com/preso/fluentconf/
How to take screenshot of canvas?
It depends on your framework but basically you can use canvas.toDataURL()
Here is a complete example
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
</script>
</body>
</html>
dataUrl will contains the image and you can save it wherever you want.
Is it possible to take a screenshot of the entire web page using canvas?
I'm not sure about Canvas. But this tool might help you achieve the results you're looking for in regards to taking a screenshot of a full page on any website: http://www.thumbalizr.com . It's come in handy many times for me.
How to take a screenshot of a webpage using html5, without rendering it on a canvas via JS
This is simpler than it seemed. The missing part, saving a still shot of the video to png, can be achieved with code from this answer. The complete code would be as follows:
const v = document.getElementById("v");const b = document.getElementById("b");const i = document.getElementById("i");
navigator.mediaDevices.getDisplayMedia({ audio: false}).then((r) => { console.log(r); v.srcObject = r;}).catch((e) => { console.log("this must be run in a secure context. Stack snippets (rightfully) refuse to run this.");});
b.onclick = () => { // take screenshot // from https://stackoverflow.com/a/44325898/15472 let scale = 1;
const canvas = document.createElement("canvas"); canvas.width = v.clientWidth * scale; canvas.height = v.clientHeight * scale; canvas.getContext('2d').drawImage(v, 0, 0, canvas.width, canvas.height);
i.src = canvas.toDataURL(); // you can send i.src here to a server
// stop video let tracks = v.srcObject.getTracks(); tracks.forEach(track => track.stop()); v.srcObject = null;}
#v,#i { width: 400; height: 300;}
#v { border: 1px solid blue;}
#i { border: 1px solid green;}
<div> <video id="v" autoplay></video> <button id="b">take screenshot</button> <img id="i" src="//:0" /></div>
Screenshot of canvas
//define some HTML to play with
<canvas id="mycanvas" width="400" height="200"></canvas>
<p><button type="button" id="savebutton">Save canvas</button></p>
<div id="gallery"></div>
<script>
//capture HTML elements
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var saveButton = document.getElementById('savebutton');
var gallery = document.getElementById('gallery');
//draw something in canvas to be captured
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, 400, 200);
ctx.fillStyle = 'red';
ctx.font = '50px Arial, sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Hello, world', 200, 100);
//define an event listener for the button
var addImage = function(e){
var img = document.createElement("img");
img.src = canvas.toDataURL();
gallery.appendChild(img);
if(e){
e.preventDefault();
e.returnValue=false;
}
};
//clicking the button will create an image element from the canvas data
//and append it as a child element to the gallery div
saveButton.addEventListener('click', addImage, false);
</script>
http://jsfiddle.net/KaliedaRik/77bNp/
How to take screenshot of a div with 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.
Related Topics
Contenteditable=False Inside Contenteditable=True Block Is Still Editable in IE8
How to Curve the Div from Bottom with Image Background
Most Common Way of Writing a HTML Table with Vertical Headers
How to Apply a Color to a Svg Text Element
How to Increase a Scrollbar's Width Using CSS
Make Bootstrap's Carousel Both Center and Responsive
Restrict Future Dates in HTML5 Date Input
Declare Variable in a Play2 Scala Template
Options with Display:None Not Hidden in Ie
How to Get a Web Page Header/Footer Printed on Every Page
How to Choose Between Get and Post Methods in HTML Forms
Does a Name Attribute Have to Be Unique in a HTML Document
How to Disable the Resize Grabber of <Textarea>