用canvas绘图文字换行输入一段字符串,获取到字符串生成的图,

function generateImage(str) {

  const canvas = document.createElement("canvas");

  const ctx = canvas.getContext("2d");

  // 设置画布尺寸

  canvas.width = 800;

  // 设置文本样式

  const fontSize = 15;

  ctx.font = `${fontSize}px Arial`;

  const lineHeight = Math.ceil(fontSize * 1.5);

  let y = lineHeight;

  let currentLine = "";

  let lines = [];

  for (let i = 0; i < str.length; i++) {

    const testLine = currentLine + str[i];

    const testWidth = ctx.measureText(testLine).width;

    if (testWidth > 800) {

      lines.push(currentLine);

      currentLine = str[i];

      y += lineHeight;

    } else {

      currentLine = testLine;

    }

  }

  lines.push(currentLine);

  const canvasHeight = lines.length * lineHeight;

  canvas.height = canvasHeight;

  y = 15;

//   ctx.font = `${fontSize}px Arial`;

  ctx.fillStyle = "#000000";

  lines.forEach(line => {

    ctx.fillText(line, 0, y);

    y += lineHeight;

  });

  return canvas.toDataURL();

}

const image = generateImage("这是一个例子，这个字符串会被绘制到图片上，并根据长度进行换行。");

console.log(image);