Question

是否有Jquery或Dojo或纯JavaScript方式将div转换为图像？图像的扩展是任意的。

Answer 1

您可以创建一个空div并创建一个将background-image属性设置为图像的类。然后，使用jQuery或Dojo，将类添加到div。

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

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

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

Answer 2

是的，有，但它很棘手，也许不可能让它完全呈现在页面上，除非div元素及其在CSS中定义的外观是以一种完全独立的方式定义的。页面。

将所需的HTML作为异物嵌入SVG。
绘制图像。（这两个步骤在此汇总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）
使用getImageData()
将数据编码为所需的图像格式（或将数据流发送到编码为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输出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所做的工作之上：

create screenshot of webpage using html2canvas (unable to initialize properly)

接受的答案显示了如何截取HTML body元素，但可以通过修改代码第一行的jQuery选择器轻松修改为“截屏”div的内容。

是否有Jquery或Dojo或纯JavaScript方式将div转换为图像？

2 个答案: