如何在不使用Canvas的情况下将HTML页面中的div转换为Image？

Question

如何在不使用画布的情况下将div元素转换为图像？

组织当前使用的浏览器是IE8，而canvas与它不兼容。

我正在寻找仅使用JavaScript / jQuery的解决方案。

Answer 1

是的，我们可以使用dom-to-image将div元素转换为图像。

  

dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量（SVG）或光栅（PNG或JPEG）图像的库。

var node = document.getElementById('my-node'); //assign our dom id to a variable
domtoimage.toPng(node)
.then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img); //append the converted image to html body
})
.catch(function (error) {
    console.error('oops, something went wrong!', error);
});

以下是converting html dom to image

的简单示例