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()
}
}