是否有 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的内容。