是否可以對網站的特定部分進行圖片制作？

Question

如果這是一個愚蠢的問題，我表示歉意，但是是否有辦法從網站的某個部分“拍照”並將其保存在計算機上？

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相鄰的網頁，我只想拍一張綠色div的照片，並將其另存為jpeg或其他內容。

例如，使用JQuery / Javascript完全可以嗎？

Answer 1

正如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

Answer 2

不確定如何播放，但是您可以利用<canvas>元素並在其中繪制<div> 。 然后畫布具有導出選項以轉換為jpg，png等。

Answer 3

這並非易事，但有些項目可以為您提供幫助。 看一下：

• html2canvas-由Stack Overflow用戶@niklas創建，請參閱他的答案以獲取更多信息。
• jsFeedback

基本上，他們使用<canvas>在其上繪制每個DOM元素，然后將其另存為位圖。 由於這種機制，輸出圖像可能不是100％准確。

如果您選擇使用html2canvas，它將接受要呈現的DOM元素列表。 看一下此示例的用法。

如果在您的用例中可行的話，另一種方法是創建Chrome擴展程序-這很容易。 如果是這樣，請查看chrome.tabs.captureVisibleTab（） 。

Answer 4

我使用phantomjs和屏幕截圖為網站拍照。 將圖像保存在Web服務器上后，您可以剪切圖像文件以獲取頁面的特定區域。