如何使用 javascript 将 textarea 文本转换为画布图像？答案

【问题标题】：How to convert textarea text into canvas image by using javascript?如何使用 javascript 将 textarea 文本转换为画布图像？
【发布时间】：2020-01-29 05:03:21
【问题描述】：

我正在尝试将我的 textarea 文本转换为画布图像。该文本需要作为图像显示在画布中。但有时我的文本在画布上完美显示，但句子分解成单词并切换到下一行。由于句子格式不正确，会出现换行符。我想在我的文本区域和画布中以换行格式显示文本。在我下面的代码中，我没有得到任何输出。请最好的建议。

   <body>
   <canvas id="myCanvas" width="578" height="400"></canvas>

   <form id="myForm">
    Text: <input id="myText" placeholder="your text"/>
    <br />
    <input type="submit" value="submit" />
   </form>

  <script>
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  var imageObj = new Image();

  imageObj.onload = function()
  {
    context.drawImage(imageObj, 0, 0);
  }  

   imageObj.src = "https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013- 
    17.jpg"; 

    var myForm = document.getElementById('myForm');
    myForm.addEventListener('submit', function(e)
     {
    var text = document.getElementById('myText').value;

      if(text.length == 0)
      {
         alert("you forgot to put something");
      }
      else
      {
        var canvas = document.getElementById("myCanvas");  
        var context = canvas.getContext("2d");  
        var maxWidth = 400;  
        var lineHeight = 25;  
        var x = (canvas.width - maxWidth) / 2;  
        var y = 60;  
        var text = document.getElementById("myText").value; 
        context.font = "16pt Calibri";  
        context.fillStyle = "#333"; 
        context.fillText(text, 50, 50); 
        wrapText(context, text, x, y, maxWidth, lineHeight);  
        e.preventDefault();}
        });
       </script>
       </body>

【问题讨论】：

标签： javascript image canvas word-wrap textinput

【解决方案1】：

您可以为此使用html2canvas。

【讨论】：