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

Question

我有申请，要下载图片作为确认收据。用户填写申请表，当他点击确定时，将为他下载一张图片。我将把它实现为一个离线应用程序（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'
});

此处生成的 blob 与文件 reader 不兼容，如果我使用以下代码，我不会得到 base64 图像吗？

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

Answer 1

找到一个解决方案，虽然不是我想要的，但可以解决我的问题。

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

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

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

How to create image from HTML tags using javascript at client end?

javascript

html

angularjs

cordova

javascript-objects