如何将包含（图像标记和某些文本）的HTML代码或数据转换为图像以供下载

I want to render some Html code as an image to download for my website. I am using html2canvas that is working fine to create image for text but I want to create image from html div,img,text,paragraph.

I am using below code to render html into image

<!DOCTYPE html>
<html>
<head lang="en">



</head>
<body>
<div><h1>HTML content to render:</h1>

    <div id="content">
        <img src="./images/127597554.jpg" height="200" width="200">
        Hello <strong>visiting</strong> guest
    </div>

</div>
<h1>Existing canvas:</h1>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="../dist/html2canvas.js"></script>
<button>Run html2canvas</button>
<script type="text/javascript">
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    var ctx = canvas.getContext('2d');
document.querySelector("button").addEventListener("click", function() {
        html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
            console.log('Drew on the existing canvas');
        });
    }, false);

</script>
</body>
</html>

I tried some third party api to achive the image but their is a limit.So i want to achive this using the code. How can i achive this.

I want an image of the below caode

<div><h1>HTML content to render:</h1>

    <div id="content">
        <img src="./images/127597554.jpg" height="200" width="200">
        Hello <strong>visiting</strong> guest
    </div>

</div>

I want to get the result like this

enter image description here

Use rasterizeHTML.js:

From the example:

<canvas id="canvas" width="400" height="200"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");

    rasterizeHTML.drawHTML(
        '<div><h1>HTML content to render:</h1>' + 
        '    <div id="content">' + 
        '        <img src="./images/127597554.jpg" height="200" width="200">' + 
        '        Hello <strong>visiting</strong> guest' + 
        '    </div>' + 
        '</div>',
        canvas);
</script>

Or just:

rasterizeHTML.drawURL("http://example.net", canvas);

To download the image use canvas2image (with a hidden canvas):

Canvas2Image.saveAsPNG(canvas, width, height);

The major advantages of doing the rendering on the client are that the html can be user specific and the server does not have to render the image.

You can embed the html in a svg to render it at the canvas, e.g.

html:

<canvas id="canvas" style="border:2px solid black;" width="160" height="43"></canvas>

js:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
            '<foreignObject width="100%" height="100%">' +
            '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
                '<em>I</em> like ' +
                '<span style="color:white; text-shadow:0 0 2px blue;">' +
                'SO</span>' +
            '</div>' +
            '</foreignObject>' +
            '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
}

img.src = url;

fiddle: https://jsfiddle.net/qkvu7fmL/

I couldn't find a reference to the original source of this example- if somebody knows- please add credits as comments.