如何將DOM元素保存/導出到圖像？

我有一個網頁，其中有一個表單元素（其ID已知）和裏面的形式有多個DIVs，並且每個div的位置可能會改變。如何將DOM元素保存/導出到圖像？

我想要做的是：

一）保存此表單的當前狀態

// var currentForm=document.forms['myFrm'].innerHTML;

可能就夠了......

B）保存或導出整個將每個DIV 的最新位置形成爲圖像文件。

//如何將currentForm的javascript var保存/導出爲圖像文件是關鍵問題。

任何幫助/指針，將不勝感激。

來源

2010-05-02 Don Don

我不明白。你想製作呈現的DIV的屏幕截圖並將其保存到圖像中嗎？ – 2010-05-02 16:47:30

更好的問題...... **爲什麼你要這樣做？你是否試圖保存UI的「狀態」以便以後重新加載？請注意.innerHTML將在IE中返回一堆無效標籤湯，並且在所有瀏覽器中都不會包含有關外部來源（CSS和JavaScript）樣式的任何信息。 – scunliffe 2010-05-02 16:55:56

雖然這是一個老問題，但有很好的理由要做。特別是在混合應用的現代時代。 – Wtower 2017-01-25 11:09:28

你想完全使用JavaScript嗎？如果是這樣，一種可能的解決方案可能是將HTML轉換爲SVG。或者，也許你可以使用<canvas>標籤並手動繪製。

來源

2010-05-02 16:52:46

我希望我理解你，這聽起來像你想要什麼<form>值的serialization：

在計算機科學中的數據存儲和傳輸的背景下，序列化的轉換數據結構或對象成比特序列，以便它可以被存儲在一個文件中，存儲緩衝器，或通過網絡連接鏈路上傳輸的過程中被「復活」在相同的後Ø r另一臺電腦環境。

JavaScript Form Serialization Comparison比較了幾種使用JavaScript和JavaScript庫將表單序列化爲可保存表單的方法。

來源

2010-05-02 16:59:06 artlung

有一個庫叫Domvas應該做你想做的。

它給你拿任意DOM內容，並將其描繪到您選擇的畫布的能力。

之後出口從canvas元素的圖像應該是很容易：

var canvas = document.getElementById("mycanvas"); 
var img = canvas.toDataURL("image/png"); 
document.write('<img src="'+img+'"/>');

來源

2012-12-03 22:51:36 sym3tri

[dom-to-image]（https://github.com/tsayen/dom-to-image）是一個基於廢棄domvas的活躍項目。 – Wtower 2017-01-25 11:04:57

後的研究時間，我終於找到了一個解決方案，採取元素的屏幕截圖，即使origin-clean FLAG （爲了防止XSS），這就是爲什麼你甚至可以捕獲例如谷歌地圖（在我的情況）。我寫了一個通用函數來獲取屏幕截圖。此外，您唯一需要的是html2canvas庫（https://html2canvas.hertzen.com/）。

實施例：

getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) { 
    // in the data variable there is the base64 image 
    // exmaple for displaying the image in an <img> 
    $("img#captured").attr("src", "data:image/png;base64,"+data); 
}

記住console.log()並且如果圖像的大小爲大alert()不會致使產生輸出。

功能：

function getScreenshotOfElement(element, posX, posY, width, height, callback) { 
    html2canvas(element, { 
     onrendered: function (canvas) { 
      var context = canvas.getContext('2d'); 
      var imageData = context.getImageData(posX, posY, width, height).data; 
      var outputCanvas = document.createElement('canvas'); 
      var outputContext = outputCanvas.getContext('2d'); 
      outputCanvas.width = width; 
      outputCanvas.height = height; 

      var idata = outputContext.createImageData(width, height); 
      idata.data.set(imageData); 
      outputContext.putImageData(idata, 0, 0); 
      callback(outputCanvas.toDataURL().replace("data:image/png;base64,", "")); 
     }, 
     width: width, 
     height: height, 
     useCORS: true, 
     taintTest: false, 
     allowTaint: false 
    }); 
}

來源

2017-01-11 07:40:33 orange01

如何將DOM元素保存/導出到圖像？

回答

相關問題