0

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>
4

2 に答える 2

2

簡単ではありませんでしたが、他の人にとってはブラウザー エンジンに注目しています。ブロブを使用したおかげです (ウェブページ全体を複製してください)。

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);
});

クロムプロジェクトで詳細を読むことができることがわかりました: http://www.html5rocks.com/en/tutorials/streaming/screenshare/

于 2013-04-08T20:30:08.280 に答える
0

Phantom.jsのようなものを試すことができます。画面キャプチャができる「JavaScript APIでスクリプト可能なヘッドレスWebKit」です。

私の経験から、それはうまく機能します。

于 2013-04-08T21:17:59.980 に答える