Question

在jQuery和html中我想将输入文本显示为图像，因为我有这样的标记

  <div class="text-input-wrap">
    <input type="text" id="text-input"/> <br />
    <input id="button" type="submit" value="Preview" />
  </div><!--.text-input-wrap-->

我希望当有人在输入文本区域中键入文本后单击“预览”时，文本应显示为图像。为此，我有像这样的jQuery

    <script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#button').click(function() {
    var textvalue = $( "#text-input").val();
    alert(textvalue);
    var canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d');
  canvas.width  = 500;
  canvas.height = 500;
  canvas.style.borderRadius = "15px";
  document.body.appendChild(canvas); // Add canvas to DOM

  // GRAPHICS
  var canvasImage = new Image();

  // GRAPHICS TO CANVAS ///////////////////

  function drawCanvas() {
    ctx.drawImage(canvasImage, 0, 0);
  }

  function drawText( text ) {
    ctx.font = '90px Calibri';
    ctx.textAlign = 'center';
    ctx.fillStyle = 'rgba(70, 70, 255, 0.7)';
    ctx.fillText(text, canvas.width/2, canvas.height/2);
  }
  drawCanvas();
  drawText('textvalue'); 
    });
  });
  </script>

此处警报文本显示右侧文本的值，但是当文本转换为图像时，它没有显示输入文本？那么有人能告诉我错误的部分在哪里？任何帮助和建议都会非常明显。感谢..

将输入文本转换为jQuery中的图像？

0 个答案: