如何在不使用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);
});

這是將html dom轉換為圖像的簡單示例