2

ばかげた質問で申し訳ありませんが、ウェブサイトの特定の部分から「写真を撮り」、コンピュータに保存する方法はありますか?

HTML 

<div id="red" color="red" width="100px" height="100px"></div>
<div id="green" color="green" width="100px" height="100px"></div>
<div id="blue" color="blue" width="100px" height="100px"></div>

たとえば、3 つの div が隣り合っている Web ページがあり、緑色の div のみの写真を撮り、それを jpeg などとして保存したいとします。

たとえば、これはJQuery/Javascriptでまったく可能ですか?

4

4 に答える 4

2

grignoが言ったように、Phantom.jsにはスクリーン キャプチャ機能があるため、良い選択です。

を使用して特定の要素の写真を撮る方法の例を次に示しますgetBoundingClientRect。

JavaScript

var page = require('webpage').create();

address = 'https://stackoverflow.com/q/18466303/2129835';
page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
        window.setTimeout(function () {
            page.clipRect = page.evaluate(function() {
                return document.querySelector('.question .post-text').getBoundingClientRect(); 
            });
            page.render('output.png');
            phantom.exit();
        }, 200);
    }
});

結果: output.png

ここに画像の説明を入力

于 2013-08-27T14:34:39.440 に答える
1

これがどのように機能するかはわかりませんが、<canvas>要素を利用してそこにを描画<div>できる場合があります。次に、キャンバスには、jpg、png などに変換するエクスポート オプションがあります。

于 2013-08-27T13:08:44.063 に答える
1

簡単にできることではありませんが、役立つプロジェクトがいくつかあります。見て：

基本的に、<canvas>各 DOM 要素をその上に描画し、ビットマップとして保存します。ただし、このメカニズムにより、出力画像は 100% 正確ではない場合があります。

html2canvas の使用を選択した場合、レンダリングする DOM 要素のリストを受け入れます。使い方はこちらのサンプルをご覧ください。

他のアプローチは、Chrome 拡張機能を作成することです。ユースケースで実現可能であれば、簡単です。もしそうなら、chrome.tabs.captureVisibleTab()を見てください。

于 2013-08-27T13:08:48.523 に答える