Canvas 实现文字转图片

Canvas 实现文字转图片，文字加边框效果

封装一个Canvas 实现文字转图片的接口，图片大小根据文字长度生成，可指定字体填充颜色和边框颜色，接口返回图片宽高和图片base64编码内容。

/*
* 将文字转为图片
* text: String, 文字内容
* fontSize: Number, 字体大小
* fillStyle: String, 字体填充颜色
* strokeStyle: String, 字体边框颜色
*/
fuction textToImage(text, fontSize, fillStyle, strokeStyle) {
	// 自动计算图片宽高
	const width = fontSize * text.length;
	const height = fontSize;
	
	// 创建 canvas 节点
	const canvas = document.createElement( 'canvas');
	const ctx = el.getContext('2d');
	
    // 设置字体
    ctx.font = `bold ${fontSize}px serif`;
    // 设置字体填充
	ctx.fillStyle = 'fillStyle'
	ctx.fillText(text, 0, fontSize);
	// 设置字体边框
	ctx.strokeStyle = 'strokeStyle'
	ctx.strokeText(text, 0, fontSize);
	
	return {
		width: width,
		height: height,
		image: canvas.toDataURL()
	}
}