是否有 Jquery 或 Dojo 或普通 JavaScript 方式將 div 轉換為圖像？

Question

是否有 Jquery 或 Dojo 或純 JavaScript 方式將 div 轉換為圖像？ 圖像的擴展是任意的。

Answer 1

您可以創建一個空 div 並創建一個 class 並將 background-image 屬性設置為您的圖像。 然后，使用 jQuery 或 Dojo，將 class 添加到您的 div。

.myImage {
  background-image: url(image.png);
  background-repeat: no-repeat;
}

<div id="myDiv"></div>

$('#myDiv').addClass('myImage');

Answer 2

是的，有，但它很棘手，並且可能無法讓它完全按照它在頁面上顯示的方式呈現，除非 CSS 中可能定義的 div 元素及其外觀的定義方式不能完全獨立於頁面。

1. 將所需的 HTML 嵌入到 SVG 中作為外國 object。
2. 繪制圖像。 （這兩個步驟總結在這里https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas?redirectlocale=en-US&redirectslug=Web%2FHTML%2FCanvas%2FDrawing_DOM_objects_into_a_canvas ）
3. 使用getImageData()獲取 canvas 數據
4. 將數據編碼為所需的圖像格式（或將數據的 stream 發送到編碼為 base64 的服務器（步驟 3 和 4 可以使用toDataURL作為一個步驟完成）

一個易於自己使用的示例圖像格式是 Unix PNM（PBM、PGM 和 PPM）格式，可以作為 ASCII 數據發送。

P2
# foo.pgm
18 7
9
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 3 3 3 3 0 0 6 6 6 6 0 0 9 9 9 9 0
0 3 0 0 0 0 0 6 0 0 6 0 0 9 0 0 9 0
0 3 3 3 0 0 0 6 0 0 6 0 0 9 0 0 9 0
0 3 0 0 0 0 0 6 0 0 6 0 0 9 0 0 9 0
0 3 0 0 0 0 0 6 6 6 6 0 0 9 9 9 9 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

（放大 20 倍： http://www.codelib.net/html/foo.png ）

從https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement中竊取，向您展示使用toDataURL到 output PNG 圖像數據的示例：

function test() {
 var canvas = document.getElementById("canvas");
 var url = canvas.toDataURL();

 var newImg = document.createElement("img");
 newImg.src = url;
 document.body.appendChild(newImg);
}

另一種方法是建立在 html2canvas 所做的工作的基礎上：

使用 html2canvas 創建網頁截圖（無法正確初始化）

那里接受的答案顯示了如何截取 HTML 正文元素，但可以通過修改代碼第一行的 jQuery 選擇器輕松修改為“截屏”div的內容。