页面设置文字内容、文字字体、文字大小、旋转角度、文字颜色，前端使用canvas生成图片

小海鸥飞

于 2024-04-08 16:06:13 发布

阅读量178

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_48636561/article/details/137512711

版权

要求：生成图片时，如果文字的长度大于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");
    }