URLを打ち込むと、そのページのキャプチャが出力される、というwebサービスを作りたいです

もちろん既存でいくつかあるサービスなのですが
そのどれもがサーバー側で指定のページにアクセスしてキャプチャをとって
それを閲覧者に返すという形になっています

この場合、閲覧者が指定のページを開いた時とサーバーがキャプチャしたのでは多少異なる点が出てきます
そこで閲覧者がURLを入力すると、裏でページを読み込み
javascriptやその他諸々を全て実行した、閲覧者がページをアクセスした状態そのままをキャプチャして
画像を返すということがしたいのですが、可能でしょうか？

よろしくお願いします

行動規範の内容に同意します

回答7件

「閲覧者がページをアクセスした状態そのままをキャプチャ」はブラウザ側で完結できるため、ブラウザ拡張とかの分野であってサービスにはならない気がします。

やったことは無いので詳しくはわかりませんが、DOM を Canvas に描画できるようなので、クライアント側で動かしさえすれば「見たままの状態を画像化」は可能だと思います。

【DOM オブジェクトを Canvas に描画する - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

下記のブラウザ拡張は表示されたHTMLをそのまま画像化します。デベロッパーツールで編集したものでもそのまま画像化されます。

【Full Page Screen Capture - Chrome ウェブストア】
https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl?utm_source=chrome-app-launcher-info-dialog

投稿2017/09/24 06:47

kei344

総合スコア69407

裏でページを読み込み、javascriptやその他諸々を全て実行した

キャプチャ先のページがAjax等で内部APIと通信するようなページである場合、
これをキャプチャ元のサイトでそのまま実行するとクロスドメイン制約にひっかかる可能性があるので、
広く一般のサイトをキャプチャするのは難しいのではないでしょうか？

Webページの見た目は、画面サイズやブラウザの種類・デバイスの種類等が大きく関係するので、
閲覧者がページをアクセスした状態そのままをキャプチャすることを目的とするならば、
アクセスしてきたユーザーの環境情報をJS等で取得して(完全自動取得でなく、ユーザー側でも細かく編集できる機能をつけてもよい)、
サーバーサイドで取得した環境情報を反映したキャプチャ画像を取得して返すようにしたほうがいいと思います。

投稿2017/09/24 09:16

退会済みユーザー

総合スコア0

html2canvasというライブラリを使用するケースが多いみたいですね。
html2canvas

追記
再描画しているようなので、閲覧者がページをアクセスした状態そのままをキャプチャするという要件には合致しないようです＾＾；

投稿2017/09/24 06:30

編集2017/09/24 06:34

退会済みユーザー

総合スコア0

ベストアンサー

CORS

CORSの制約がある為、クライアント側では任意のURIに対して自由にHTTPリクエスト出来ません。
外部ドメインにHTTPリクエストするには、相手先サーバでHTTPリクエストを受け付ける設定をしている必要があります。
この制約は自サイトの情報を外部からWebスクレイピングされ、外部サイトのコンテンツであるかのように振る舞われることを防止しています。

html2canvas

html2canvasはブラウザに描画された画面のスクリーンショットをとっているのではありません。
DOM上にある情報を元に、独自のレンダリングエンジンによって、ブラウザが描画するであろう画面を計算し、canvasに出力しています。
従って、どのブラウザで実行したとしても、html2canvasに同じ引数が指定されれば、同じ画面を出力しますし、html2canvasが解釈出来ないプロパティは無視されます。

How it works

The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.

As a result, it is only able to render correctly properties that it understands, meaning there are many CSS properties which do not work.

http://html2canvas.hertzen.com/documentation.html