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

时间:2013-10-05 07:13:30

标签: javascript jquery html

在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>

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

0 个答案:

没有答案