js将文字填充与canvas画布再转为图片

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

需求：封装consul服务的webUI；

原因：展示consul的服务信息时，需要嵌套动画，由于其没有内置的icon，所以将服务name放于图片位；

分析：展示信息时采用了卡片式的服务布局，缩放式的服务卡片，只有将服务名称作为图片才能实现动画效果；

最基础动画：->

实现：将服务名称置于canvas画布中，再将画布转为图片

代码实现：

1、获取dom

/**
* 获取service卡片中img对象并赋值src
* @param serviceName 服务名称
*/
setImageSrc(serviceName) {
//因为src不是该HTMLElement类型的属性，而是HTMLImageElement。
let image = <HTMLImageElement>document.querySelector("#nameImage" + serviceName);
image.src = this.canvasWrapText({canvas:<HTMLElement>document.querySelector("#canvas" + serviceName),text: serviceName});
}

2、画布=>图片

/**
* 绘制文字到canvas，判断换行位置，和设置canvas高度
* @param options canvas画布对象
*/
canvasWrapText(options) {
let settings = {
canvas:document.getElementsByTagName("canvas")[], //canvas对象，必填，不填写默认找到页面中的第一个canvas
canvasWidth:, //canvas的宽度
drawStartX:, //绘制字符串起始x坐标
drawStartY:, //绘制字符串起始y坐标
lineHeight:, //文字的行高
font:"24px 'Microsoft Yahei'", //文字样式
text:"请修改掉默认的配置", //需要绘制的文本
drawWidth:, //文字显示的宽度
color:"#000000", //文字的颜色
textAlain: "center",
backgroundColor:"#ffffff", //背景颜色
}; //将传入的配置覆盖掉默认配置
if(!!options && typeof options === "object"){
for(let i in options){
settings[i] = options[i];
}
} //获取2d的上线文开始设置相关属性
let canvas = settings.canvas;
canvas.width = settings.canvasWidth;
let ctx = canvas.getContext("2d"); //绘制背景色
ctx.fillStyle = settings.backgroundColor;
ctx.fillRect(,,canvas.width,canvas.height); //绘制文字
ctx.font = settings.font;
ctx.fillStyle = settings.color;
// @ts-ignore
ctx.textAlign = settings.textAlain;
let lineWidth = ; //当前行的绘制的宽度
let lastTextIndex = ; //已经绘制上canvas最后的一个字符的下标
//由于改变canvas 的高度会导致绘制的纹理被清空，所以，不预先绘制，先放入到一个数组当中
let arr = [];
for(let i = ; i< settings.text.length; i++){
//获取当前的截取的字符串的宽度
lineWidth = ctx.measureText(settings.text.substr(lastTextIndex,i-lastTextIndex)).width; if(lineWidth > settings.drawWidth){
//判断最后一位是否是标点符号
if(judgePunctuationMarks(settings.text[i-])){
arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex));
lastTextIndex = i;
}else{
arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex-));
lastTextIndex = i-;
}
}
//将最后多余的一部分添加到数组
if(i === settings.text.length - ){
arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex+));
}
} //根据arr的长度设置canvas的高度
canvas.height = arr.length*settings.lineHeight+settings.drawStartY; ctx.font = settings.font;
ctx.fillStyle = settings.color;
for(let i =; i<arr.length; i++){
ctx.fillText(arr[i],settings.drawStartX,settings.drawStartY+i*settings.lineHeight);
}
//判断是否是需要避开的标签符号
function judgePunctuationMarks(value) {
let arr = [".",",",";","?","!",":","\"","，","。","？","！","；","：","、"];
for(let i = ; i< arr.length; i++){
if(value === arr[i]){
return true;
}
}
return false;
}
return canvas.toDataURL();
}