写这个的原因是在写一个小程序的需求的时候用到了,在此记录一下。
需求需要实现的点就是:在分享小程序个人资料页面的时候将个人信息和个人头像进行重叠放在一起然后分享出去,大概样子如下:
不同的用户头像不同,个人信息不同。写一个函数传入这两个信息,动态合成一张图片,然后再进行分享。
实现的完整代码如下:
// 图片文字合成
// 绘制文字
function canvasWraptitleText(ctx, text, x, y, maxWidth, lineHeight, maxRowNum,font,color) {
return new Promise((resolve, reject) => {
if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
return;
}
ctx.font = font; //绘制文字的字号和大小
ctx.setFillStyle(color) //字体颜色
// 字符分隔为数组
var arrText = text.split('');
var line = '';
var rowNum = 1;
for (var n = 0; n < arrText.length; n++) {
var testLine = line + arrText[n];