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

【问题标题】：How to convert all elements inside html div element into an image using javascript without any third party library如何在没有任何第三方库的情况下使用 javascript 将 html div 元素中的所有元素转换为图像
【发布时间】：2017-11-03 11:48:49
【问题描述】：

我有一个包含 3 个元素的 div。我想在不使用第三方工具的情况下将整个 div 转换为图像。请就此提出任何建议。

<!DOCTYPE html>
<html>
<body>
<div id="div1">DIV 1<br>
<svg width="50" height="50">
<path d="M0,0 L50,0 L50,50 Z"
    style="stroke: #006666; fill:none;"/>
</svg>
<div>DIV 2</div>
<input type="button" value="Button"/>
</div>
</body>
</html>

【问题讨论】：

那么用图片替换div，还是在div中添加图片？
MDN 文档有帮助吗？ developer.mozilla.org/en-US/docs/Web/API/Canvas_API/…
不应该只作为div，需要将该div转换成图片
@JaromandaX 我已经检查了链接。此方法仅转换文本。无法转换文本以外的元素。
也许你想看看replaceChild和replaceWith

标签： javascript export-to-image

【解决方案1】：

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

var svgText = document.getElementById("myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
var btn = document.getElementsByClassName('convert2Png')[0];

function drawInlineSVG(ctx, rawSVG) {

    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image;
    
    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
    };
    
    img.src = url;
}

// usage:
btn.addEventListener('click', function() {
  drawInlineSVG(ctxt, svgText);
});

<!DOCTYPE html>
    <html>
    <body>
    <div id="div1">DIV 1<br>
    <svg width="50" height="50" id="myViewer" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
    <path d="M0,0 L50,0 L50,50 Z"
        style="stroke: #006666; fill:none;"/>
    </svg>
    <div>DIV 2</div>
    <input class="convert2Png" type="button" value="Button"/>
    <canvas id="canvas" width=800 height=600 style="margin-top:10px;"></canvas>
    </div>
    </body>
    </html>

【讨论】：

以上代码将 svg 转换为图像。没关系。但它不会转换其他 html 元素，如 div、按钮。我也想将这些元素转换为图像。还有其他选择吗？
将文本放入 SVG 中？
不，它应该只作为 div 元素。对于div、按钮元素，必须转换成图片
对不起，但正如@Arg0n 所提到的，这就是你需要的 jsfiddle.net/8ypxW/3。我知道您不想要插件，但恐怕我没有时间或专业知识来重新发明该插件。希望其他人能够帮助您。