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

【问题标题】：How to create image from HTML tags using javascript at client end?如何在客户端使用 javascript 从 HTML 标签创建图像？
【发布时间】：2015-12-08 08:50:04
【问题描述】：

我有一个应用程序，下载图像作为确认收据。用户填写申请表，当他点击确定时，将为他下载一张图片。我将把它实现为一个离线应用程序（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不兼容文件阅读器，如果我使用以下代码，我不会得到图像 base64？

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

【问题讨论】：

标签： javascript html angularjs cordova javascript-objects

【解决方案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

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

【讨论】：