JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<html>
<body>
    <div>
        <h3 style="color:blue">My Title</h3>
        <div style="color:red">
            My Text
        </div>
        <button onclick="export1()">Export Plain Html</button>
        <button onclick="export2()">Export Entire Document</button>
    </div>
</body>
</html>

JavaScript

function export1() {
            const html = '<p style="color:red">this is <br> sparta';
            renderHtmlToImage(html, 800, 600, "image/png");
        }

        function export2() {
            renderDocumentToImage(window.document, 800, 600, "image/png");
        }
        // format is: image/jpeg, image/png, image/svg+xml
        function exportImage(base64data, width, height, format) {
            var img = new Image();
            img.onload = function () {
                if ("image/svg+xml" == format) {
                    var w = window.open("");
                    w.document.write(img.outerHTML);
                    w.document.close();

                }
                else {
                    const canvas = document.createElement("Canvas");
                    canvas.width = width;
                    canvas.height = height;
                    const ctx = canvas.getContext('2d');
                    ctx.fillStyle = "white";
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, 0, 0);
                    var exportImage = new Image();
                    exportImage.onload = function () {
                        var w = window.open("");
                        w.document.write(exportImage.outerHTML);
                        w.document.close();
                    }
                    exportImage.src = canvas.toDataURL(format);
                }
            }
            img.src = base64data;
        }

        // format is: image/jpeg, image/png, image/svg+xml
        function renderHtmlToImage(html, width, height, format) {
            var svgData = '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">'
                + '<foreignObject width="100%" height="100%">'
                + html2SvgXml(html)
                + '</foreignObject>'
                + '</svg>';
            var base64data = "data:image/svg+xml;base64," + btoa(svgData);
           ...