cavans实现文字转图片（娱乐项目）

抽象网友123
已于 2023-04-27 10:43:13 修改
阅读量937
点赞数
于 2021-12-12 16:59:40 首次发布
本文链接：https://blog.csdn.net/weixin_43993605/article/details/121890043
版权
其他疑难杂症解决专栏收录该内容
2 篇文章 0 订阅
订阅专栏
供参考。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>文字转图片生成器</title>
  </head>
  <body>
    <script type="text/javascript">
      //绘制文字到canvas，判断换行位置，和设置canvas高度

      function canvasWrapText(options) {
        let settings = {
          canvas: document.getElementsByTagName("canvas")[0], //canvas对象，必填，不填写默认找到页面中的第一个canvas
          canvasWidth: 580, //canvas的宽度
          drawStartX: 60, //绘制字符串起始x坐标
          drawStartY: 50, //绘制字符串起始y坐标
          lineHeight: 50, //文字的行高
          font: "40px microsoft-yahei,Bold", //文字样式(普通汉字)
          font1: "12px 'Italic'", //文字样式(水印)
          font2: "40px STXingkai,fantasy", //文字样式(数字)
          font3: "40px STHupo", //文字样式(字母)
          text: "请修改掉默认的配置", //需要绘制的文本
          drawWidth: 460, //文字显示的宽度
          color: "rgba(0,255,1,1)", //文字的颜色
          backgroundColor: "rgba(150,150,150,1)", //背景颜色
        };

        //将传入的配置覆盖掉默认配置
        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.font = settings.font;
        ctx.fillStyle = settings.color;
        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 + 1) * settings.lineHeight + settings.drawStartY;
        // canvas.width = 480*0.99863 + canvas.height*0.052336;

        ctx.fillStyle = settings.backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        //绘制遮罩层
        ctx.fillStyle = settings.backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        //绘制文字
        ctx.font = settings.font;
        ctx.fillStyle = settings.color;
        // ctx.rotate(-3 * Math.PI / 180);
        for (let i in arr) {
          //对易识别的字母和数字的处理
          let nowX = settings.drawStartX;
          let regASCII = /^[\u0000-\u00ff]$/;
          let regEn = /^[a-zA-Z]*$/;
          let regNum = /^[0-9]*$/;
          for (let j in arr[i]) {
            if (regASCII.test(arr[i][j])) {
              //匹配单字节
              if (regEn.test(arr[i][j])) {
                //如果为英文字母
                ctx.font = settings.font3;
                ctx.fillText(
                  arr[i][j],
                  nowX,
                  settings.drawStartY + i * settings.lineHeight
                );
                nowX += 20;
              } else if (regNum.test(arr[i][j])) {
                //如果为数字
                ctx.font = settings.font2;
                ctx.fillText(
                  arr[i][j],
                  nowX,
                  settings.drawStartY + i * settings.lineHeight
                );
                nowX += 20;
              } else {
                ctx.font = settings.font;
                ctx.fillText(
                  arr[i][j],
                  nowX,
                  settings.drawStartY + i * settings.lineHeight
                );
                nowX += 20;
              }
            } else {
              //双字节
              if (arr[i][j] != "\n" || arr[i][j] != " ") {
                ctx.font = settings.font;
                ctx.fillText(
                  arr[i][j],
                  nowX,
                  settings.drawStartY + i * settings.lineHeight
                );
                nowX += 40;
              } else {
                ctx.font = settings.font;
                ctx.fillText(
                  arr[i][j],
                  nowX,
                  settings.drawStartY + i * settings.lineHeight
                );
                nowX += 20;
              }
            }
          }
          // ctx.fillText(arr[i],settings.drawStartX,settings.drawStartY+i*settings.lineHeight);  //原绘制方法
        }

        //绘制底层网格
        let girdSize = 2;

        // 2. 获取Canvas的width、height
        let CanvasWidth = canvas.width;
        let CanvasHeight = canvas.height;

        // 3. 采用遍历的方式，绘画x轴的线条
        let xLineTotals = Math.floor(CanvasHeight / girdSize); // 计算需要绘画的x轴条数
        for (let i = 0; i < xLineTotals; i++) {
          ctx.beginPath(); // 开启路径，设置不同的样式
          ctx.moveTo(0, girdSize * i - 0.5); // -0.5是为了解决像素模糊问题
          ctx.lineTo(CanvasWidth, girdSize * i - 0.5);
          ctx.strokeStyle = "rgba(150,150,150,1)"; // 设置每个线条的颜色
          ctx.stroke();
        }

        // 4.采用遍历的方式，绘画y轴的线条
        let yLineTotals = Math.floor(CanvasWidth / girdSize); // 计算需要绘画y轴的条数
        for (let j = 0; j < yLineTotals; j++) {
          ctx.beginPath(); // 开启路径，设置不同的样式
          ctx.moveTo(girdSize * j, 0);
          ctx.lineTo(girdSize * j, CanvasHeight);
          ctx.strokeStyle = "rgba(150,150,150,1)"; // 设置每个线条的颜色
          ctx.stroke();
        }

        //判断是否是需要避开的标签符号
        function judgePunctuationMarks(value) {
          let arr = [
            ".",
            ",",
            ";",
            "?",
            "!",
            ":",
            '"',
            "，",
            "。",
            "？",
            "！",
            "；",
            "：",
            "、",
          ];
          for (let i = 0; i < arr.length; i++) {
            if (value === arr[i]) {
              return true;
            }
          }
          return false;
        }

        return canvas.toDataURL();
      }

      function buttonOnClick() {
        let text = document.getElementById("ta").value;
        if (text == "") {
          alert("文字为空");
        } else {
          //调用函数获取到img的data数据
          let data = canvasWrapText({
            canvas: document.getElementById("canvas"),
            text: text,
          });

          //创建一个img对象，在页面上显示打印的数据
          let img = document.getElementById("img"),
            canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d");
          img.src = data;
        }
      }
    </script>

    <div align="center"></div>

    <div>
      <textarea
        id="ta"
        style="width: 99%; height: 300px"
        placeholder="请输入文字以生成图片"
      ></textarea>
      <button
        style="display: block; margin: 10px auto; text-align: center"
        id="btn"
        onclick="buttonOnClick()"
      >
        生成
      </button>
      <img
        id="img"
        style="display: block; margin: 10px auto; text-align: center"
      />

      <canvas id="canvas" style="display: none"></canvas>
    </div>
  </body>
</html>