3D字体转png图片

3D字体转png图片

下方图片是自己写的页面截图：

附上一部分代码：
其中str.w 是生成图片的宽度，str.h是生成图片的高度，str.style是文字样式，str.name是输入的文字名称

//div转成svg  
var data = "data:image/svg+xml," +
	"<svg xmlns='http://www.w3.org/2000/svg' width='" + str.w + "' height='" + str.h + "'>" +
	"<foreignObject width='100%' height='100%'>" +
	'<div xmlns="http://www.w3.org/1999/xhtml" style="' + str.style + '">' + str.name +
	'</div>' +
	"</foreignObject>" +
	"</svg>";
var img = new Image();
img.src = data;

//svg转成canvas  
var canvas = document.getElementById("imgCtx");
var context = canvas.getContext('2d');
canvas.width = str.w;
canvas.height = str.h;
//取得画布的2d绘图上下文  ，在img加载完成后执行
img.onload = function() {
	context.drawImage(img, 0, 0);
	var a = document.createElement('a');
	a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据  
	a.download = "图片"; //设定下载名称  
	// 图片导出为 png 格式  
	var type = 'png';
	var imgData = canvas.toDataURL(type);
	var _fixType = function(type) {
		type = type.toLowerCase().replace(/jpg/i, 'jpeg');
		var r = type.match(/png|jpeg|bmp|gif/)[0];
		return 'image/' + r;
	};
	imgData = imgData.replace(_fixType(type), 'image/octet-stream');
	var saveFile = function(data, filename) {
		var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
		save_link.href = data;
		save_link.download = filename;
		var event = document.createEvent('MouseEvents');
		event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		save_link.dispatchEvent(event);
	};
	// 下载后的图片名  
	var filename = 'img' + (new Date()).getTime() + '.' + type;
	// download  
	saveFile(imgData, filename);
}