/*** 获取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});}

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

<div class="member-image"><!--为了将文字渲染为图片所设置的样例canvas--><canvas id="canvas{{card.name}}" width="" height="" style="background-color:#ffffff;display: none;"></canvas><img id="nameImage{{card.name}}" alt="Member">
</div>