Need a working code with only javascript and no extra library files (-> jquery,...) That take a screenshot from the whole webpage. (top to bottom page)
Current i have this which does not work why?
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var window = document.getElementById('item');
var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext("2D");
ctx.drawImage(window, 0,0, 100, 200, "rgb(255,255,255)");
canvas.toDataURL("image/png");
});
</script>
</head>
<body id="item">
test website
<canvas id='my-canvas'></canvas>
Need a working code with only javascript and no extra library files (-> jquery,...) That take a screenshot from the whole webpage. (top to bottom page)
Current i have this which does not work why?
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var window = document.getElementById('item');
var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext("2D");
ctx.drawImage(window, 0,0, 100, 200, "rgb(255,255,255)");
canvas.toDataURL("image/png");
});
</script>
</head>
<body id="item">
test website
<canvas id='my-canvas'></canvas>
- Reopened... You can post your answer. – Robert Harvey Commented Apr 8, 2013 at 20:21
- html5rocks./en/tutorials/streaming/screenshare – mplungjan Commented Apr 8, 2013 at 20:25
- Please link to the duplicate you found, Robert – mplungjan Commented Apr 8, 2013 at 20:53
- @mplungjan: It's in the edit history. – Robert Harvey Commented Apr 9, 2013 at 15:08
- is that visible to everybody? If not, then stackoverflow./questions/4912092/… – mplungjan Commented Apr 9, 2013 at 15:43
2 Answers
Reset to default 2It's wasn't easy but for the other people look to the browser engine. Because thanks to the use of the blob (kindly clone the whole webpage).
urlsToAbsolute(document.images);
urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
urlsToAbsolute(document.scripts);
var screenshot = document.documentElement.cloneNode(true);
var blob = new Blob([screenshot.outerHTML], {type: 'text/html'});
window.open(window.URL.createObjectURL(blob));
screenshot.dataset.scrollX = window.scrollX;
screenshot.dataset.scrollY = window.scrollY;
screenshot.style.pointerEvents = 'none';
screenshot.style.overflow = 'hidden';
screenshot.style.userSelect = 'none';
var script = document.createElement('script');
script.textContent = '(' + addOnPageLoad_.toString() + ')();';
screenshot.querySelector('body').appendChild(script);
window.addEventListener('DOMContentLoaded', function(e) {
var scrollX = document.documentElement.dataset.scrollX || 0;
var scrollY = document.documentElement.dataset.scrollY || 0;
window.scrollTo(scrollX, scrollY);
});
I found you can read more in the chromium project: http://www.html5rocks./en/tutorials/streaming/screenshare/
You could try something like phantom.js. It is a "headless WebKit scriptable with a JavaScript API" that allows you to do screen capture.
From my experience it works well.