如何在没有任何第三方库的情况下使用javascript将html div元素中的所有元素转换为图像

我有一个有3个元素的div。我想在不使用第三方工具的情况下将整个div转换为图像。请向我提供任何有关这方面的建议

第1部分

第2组

这可能是一个很好的起点。我稍微修改了这个问题的答案。我刚刚删除了回调并添加了一个单击事件。有关代码的详细说明，请参阅

var svgText=document.getElementById（“myViewer”）.outerHTML；
var myCanvas=document.getElementById（“canvas”）；
var ctxt=myCanvas.getContext（“2d”）；
var btn=document.getElementsByClassName（'convert2Png'）[0]；
函数drawInlineSVG（ctx、RAWSSVG）{
var svg=newblob（[rawSVG]，{type:“image/svg+xml；charset=utf-8”}），
domURL=self.URL | | self.webkitURL | | self，
url=domURL.createObjectURL（svg），
img=新图像；
img.onload=函数（）{
ctx.drawImage（this，0，0）；
revokeObjectURL（url）；
};
img.src=url；
}
//用法：
btn.addEventListener（'click'，function（）{
drawInlineSVG（ctxt、svgText）；
});

第1部分

第2组
因此，用图像替换div，或者向div添加图像？MDN文档是否有帮助？不，它应该只作为div，需要将该div转换为image@JaromandaX我已经检查了链接。此方法仅转换文本。无法转换除文本以外的元素。可能您需要查看上面的代码，并将svg转换为图像。没关系。但它不会转换其他html元素，如div、button。我想将这些元素也转换为图像。还有其他选项吗？将文本放在SVG中？没有，它应该仅作为div元素。对于div、button元素，必须将其转换为imageSorry，但正如@Arg0n所述，这就是您需要的jsfiddle.net/8ypxW/3。我知道你不想要一个插件，但我恐怕我没有时间或专业知识来重新发明这个插件。希望其他人能帮助你。