Javascript 如何将我的动态div转换为png图像

我这里有3个动态div，正在尝试将动态div转换为priview部分的图像格式，如何将动态div转换为图像格式？有什么想法吗

并且还需要隐藏动态div并只显示图像，请提供一个提琴

---

检查此项以供参考。

我在jQuery的帮助下快速实现了它，并快速查看了其中一个at MDN。当然不是最好的方法，但你会明白的

还有一件事是，您可能希望在

jQuery（'#htmlBlock'）.html（jQuery（'#editor'）.val（））；
jQuery（'#editor'）.on（'change'，function（））{
jQuery（'#htmlBlock'）.html（jQuery（this.val（））；
});
jQuery（'#html2img'）。on（'click'，function（）{
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
模板[3]=jQuery（'#htmlBlock'）.html（）；
var svg=new Blob（[template.join（“”）]{
键入：“image/svg+xml；charset=utf-8”
});
var url=DOMURL.createObjectURL（svg）；
jQuery（'imgitem'）.attr（'src'，url）；
});
var DOMURL=window.URL | | window.webkitURL | | window；
变量模板=[
'',
'',
'',
'',
'',
'',
''
];
#htmlBlock{
背景色：#AAA；
最大宽度：140像素；
填充：10px；
}
标签{
显示：块；
利润率：10px0；
}

你好世界
HTML2图像
HTML:
图片：
我也尝试过这种方法，但它不能动态工作，只需要显示图像，而不需要显示主div
Canvas2Image.saveAsPNG(canvas); 
$("#img-out").append(canvas);

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
});