如何使用javascript將textarea文本轉換為畫布圖像？

Question

我正在嘗試將我的 textarea 文本轉換為畫布圖像。 該文本需要作為圖像顯示在畫布中。 但有時我的文本完美地顯示在畫布上，但句子卻分解成單詞並切換到下一行。 由於句子格式不正確，會發生換行。 我想在我的 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>

Answer 1

為此，您可以使用html2canvas 。

如何使用javascript將textarea文本轉換為畫布圖像？

問題描述

1 個解決方案

解決方案1
0 2020-01-29 05:24:40

如何使用javascript將textarea文本轉換為畫布圖像？

問題描述

1 個解決方案

解決方案1 0 2020-01-29 05:24:40

解決方案1
0 2020-01-29 05:24:40