要求:生成图片时,如果文字的长度大于255px,盒子宽高就用文字的长度,如果文字长度小于255px,盒子宽高就用255px
理解:canvas是一层一层画上去的,因此先画了第一层的背景,然后画了第二层的文字
canvasContentImg(w = 255, h = 255) {
// 内容
const text = this.formData.textContent || "测试内容";
// 字体大小
const fontSize = this.formData.fontSize || 12;
// 字体
const fontFamily = this.formData.fontFamily || "";
// 字体颜色
const fontColor = this.formData.fontColor || "#000000";
// 旋转
const rotationAngle = this.formData.rotationAngle || 0;
// 绘画
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
// 画第一层:白色背景
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, w, h);
// 字体大小与字体
ctx.font = `${fontSize}px ${fontFamily}`;
// 字体颜色
ctx.fillStyle = fontColor;
// 内容居中对齐,相较于中心点,canvas中心点一开始是在0px,0px,即左上角
ctx.textAlign = "center";
// 中心点位置平移到盒子的正中心,因为设置了textAlign = "center",所以文字也会跟着中心点移动到盒子的中心
ctx.translate(w / 2, h / 2);
// 旋转S
ctx.rotate((rotationAngle * Math.PI) / 180);
// 设置内容
ctx.fillText(text, 0, 0);
// 获取内容的宽
const metrics = ctx.measureText(text);
const textWidth = metrics.width;
if (textWidth > w) {
return this.canvasContentImg(textWidth + 1, textWidth + 1);
}
return canvas.toDataURL("image/png");
}