使用Jquery編譯/保存/導出HTML爲PNG圖像

我有一個包含多個變量的設置，用戶可以通過這個設置改變這個效果，使其成爲一個元素的直觀表示。所有這些都由jQuery腳本控制。如果有一種方法可以根據瀏覽器呈現的結果保存結果圖像，那將很酷。從用戶的角度來看，它與屏幕捕捉沒有什麼不同，儘管它只能捕獲相關區域。使用Jquery編譯/保存/導出HTML爲PNG圖像

我有一個名爲Page Saver的FF插件，它的功能幾乎是我在找的東西，但如果可能的話，使用jquery或常規javascript。

我更多的是尋求提示，以及大家爲了追求這些功能而建議我參加的大方向。我寧願不學習另一種語言來做到這一點，但如果我必須...

來源

2011-05-09 C_K

編輯：此方法僅適用於Firefox擴展。

您可以使用HTML5 canvas，Firefox'drawWindow和toDataURL方法。例如：

var capture = function() { 
    var root = document.documentElement; 
    var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'html:canvas'); 
    var context = canvas.getContext('2d'); 
    var selection = { 
    top: 0, 
    left: 0, 
    width: root.scrollWidth, 
    height: root.scrollHeight, 
    }; 

    canvas.height = selection.height; 
    canvas.width = selection.width; 

    context.drawWindow(
    window, 
    selection.left, 
    selection.top, 
    selection.width, 
    selection.height, 
    'rgb(255, 255, 255)' 
); 

    return canvas.toDataURL('image/png', ''); 
};

可以調整top，left，width和height只捕捉網頁的一部分。

結果是一個data URI字符串。你可以把它發送到您的服務器，或者借鑑其他畫布：

var canvas = document.getElementById('captured'); 
    var ctx = canvas.getContext('2d'); 
    var image = new Image(); 
    image.src = capture(); 

    // the image is not immediately usable 
    $(image).load(function() { // jquery way 
    canvas.width = image.width; 
    canvas.height = image.height; 
    ctx.drawImage(image, 0, 0); 
    });

你的插件可能使用這種方法。你也可以檢查它的源代碼。

編輯：要將其與jQuery發送到你的服務器，你可以做這樣的事情：

$("#send-capture-button").click(function() { 
    $.post("/url-to-send-image-to", {image_data: capture()}) 
});

在服務器端，你就必須對數據進行解碼URL。

來源

2011-05-09 20:09:05

哇，我會玩弄這個，看看我不能得到它做我需要的東西。感謝非常深刻的答案！這使用HTML5，所以只有較新的瀏覽器才能使用這種功能？ – 2011-05-10 17:20:58

您可以查看http://caniuse.com/#search=canvas，但我不知道「canvas基本支持」是否包含此方法。 – 2011-05-10 17:50:18

在我準備實施這個腳本之前，我花了一段時間。我不確定如何實現它，但是如何觸發圖像創建，以及將生成的圖像顯示在哪裏？ – 2011-05-18 16:35:19

瀏覽器中沒有內置JS功能，可以讓你悲傷地將圖像轉換爲HTML。所以你需要安裝一個瀏覽器插件或擴展，它有一個你可以調用的JS API。但即使如此，它顯然需要該插件安裝在該人的瀏覽器上。

來源

2011-05-09 19:55:14

使用Jquery編譯/保存/導出HTML爲PNG圖像

回答

相關問題