如何在客户端使用javascript从HTML标记创建图像？

我有一个应用程序，下载图像作为确认收据。用户填写申请表，当他单击“确定”时，将为他下载图像。 我将把它实现为一个离线应用程序（Phonegap框架）

是否可以使用Javascript创建动态图像文件

这是我的密码

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<h3>Header</h3><em>I</em> like ' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'cheese</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 canvas = document.getElementById('textCanvas');
var context = canvas.getContext('2d');

context.font = '25pt Calibri';
context.fillStyle = '#891313';
context.fillText('My Header', 46, 30);
context.fillText('Description text, contains long ....', 20, 50);

console.log(context.canvas.toDataURL()) //this is the base64 formate of image

基本上，我在这里创建了一个画布图像，并将其转换为图像，稍后可以轻松下载

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

context.font = '25pt Calibri';
context.fillStyle = '#891313';
context.fillText('My Header', 46, 30);
context.fillText('Description text, contains long ....', 20, 50);

console.log(context.canvas.toDataURL()) //this is the base64 formate of image