Как конвертировать HTML-код или данные, содержащие (тег изображения и некоторый текст) в изображение для загрузки

Я хочу отобразить некоторый HTML-код в качестве изображения для загрузки для моего сайта. Я использую html2canvas, который отлично работает для создания изображения для текста, но я хочу создать изображение из html div, img, text, paragraph.

Я использую ниже код для рендеринга html в изображение

<!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>

Я попробовал некоторые сторонние api, чтобы достичь имиджа, но их предел. Поэтому я хочу добиться этого с помощью кода. Как я могу добиться этого.

Я хочу изображение нижеприведенного каода

 <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>

Я хочу получить такой результат

введите описание изображения здесь

Используйте rasterizeHTML.js :

Из примера:

 <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>

Или просто:

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

Для загрузки изображения используйте canvas2image (со скрытым холстом):

 Canvas2Image.saveAsPNG(canvas, width, height);

Основными преимуществами выполнения рендеринга на клиенте являются то, что html может быть специфичным для пользователя, и сервер не должен отображать изображение.

Вы можете вставлять html в svg, чтобы отобразить его на холсте, например

HTML:

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

ЯШ:

 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;

скрипка: https://jsfiddle.net/qkvu7fmL/

Я не мог найти ссылку на исходный источник этого примера – если кто-то знает – добавьте кредиты в качестве комментариев.