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

我想渲染一些Html代码作为图像下载我的网站。 我正在使用html2canvas工作正常，为文本创建图像，但我想从html div，img，text，paragraph创建图像。

我使用下面的代码将html渲染成图像

     
HTML content to render:
 
  Hello visiting guest 
 
 
Existing canvas:
   Run html2canvas  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);    

我尝试了一些第三方api来实现图像但是它们是一个限制。所以我想使用代码实现这一点。 我怎么能做到这一点。

我想要一张下面caode的图片

 
HTML content to render:
 
  Hello visiting guest 
  

我想得到这样的结果

Answer 1

使用rasterizeHTML.js ：

从示例：

要不就：

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

要下载图像，请使用canvas2image （带有隐藏的canvas）：

 Canvas2Image.saveAsPNG(canvas, width, height); 

在客户端上进行渲染的主要优点是html可以是特定于用户的，并且服务器不必渲染图像。

Answer 2

您可以将html嵌入到svg中以在canvas上呈现它，例如

HTML：

JS：

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var data = ''; 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/

我无法找到对此示例的原始来源的引用 – 如果有人知道 – 请添加信用作为评论。