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

Question

I have an application, to download image as a confirmation receipt. User fill the application form and when he clicks ok a image will be downloaded for him. I am going to implement this as an offline app(Phonegap framework).

Could it possible to create a dynamic image files using Javascript?

Here are my codes,

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'
});

The blob generated here is not compatible with file reader, i wont get image base64 if i use following codes?

var reader = new FileReader();
reader.onload = function() {
var dataURL = reader.result;
 console.log(dataURL)
};
reader.readAsDataURL(svg);

Answer 1

Found one solution, which is not exact what i wanted but can solve my problem.

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

Basically here i create one canvas image and convert it to image, which later can easily downloaded.