Question

您好我是javascript的新手，这是我的问题，我正在尝试创建Meme生成器，但我遇到了问题，画布上的图像只在我开始输入时显示。我希望得到像它附加的图像，不确定问题是什么。

还不确定如何使画布上的图像响应。谢谢你的帮助。

＆＃13;

<html>
	<head>
		<title>Meme Generator</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style></style>
		
		<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
		
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
		
	</head>
	
	<body>
	
<div class="container"/>
   
  
</canvas>		
		<div class="row">
        <div class="col-md-2">
		 <div id="thumbs">
          <img src="https://i.imgur.com/x8La5Km.jpg" class="img-responsive" alt="1st image description" />
          <img src="https://i.imgur.com/EXzUdtK.jpg" class="img-responsive" alt="2nd image description" />
          <img src="https://i.imgur.com/IJW9cPN.jpg" class="img-responsive" alt="3rd image description" />
         
         </div>
		
		</div>
		
        <div class="col-md-6">
		 
		  <div id="panel">
		   <canvas id="memecanvas">
            <img id="largeImage" src="https://i.imgur.com/x8La5Km.jpg" class="img-responsive" />
          </canvas>
		  </div>
		
		</div>
        <div class="col-md-4">
		  <div class="form-group">
          <input class="form-control" id="inputdefault" type="text">
          </div>
		  <div class="form-group">
          <input class="form-control" id="inputdefault2" type="text">
          </div>
		  <button type="button" class="btn btn-primary btn-block">CLEAR</button>
		  <button type="button" class="btn btn-primary btn-block">SHARE ON FACEBOOK</button>
		
		
		
		</div>
      </div>
</div>
	
		
		
	
		<script>
		$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});


  var memeSize = 600;

  var canvas = document.getElementById('memecanvas');
  ctx = canvas.getContext('2d');


  // Set the text style to that to which we are accustomed



  canvas.width = 600;
  canvas.height = 600;

  //  Grab the nodes
  var img = document.getElementById('largeImage');
  var topText = document.getElementById('inputdefault');
  var bottomText = document.getElementById('inputdefault2');

  // When the image has loaded...
  img.onload = function() {
    drawMeme()
  }  

  topText.addEventListener('keydown', drawMeme)
  topText.addEventListener('keyup', drawMeme)
  topText.addEventListener('change', drawMeme)

  bottomText.addEventListener('keydown', drawMeme)
  bottomText.addEventListener('keyup', drawMeme)
  bottomText.addEventListener('change', drawMeme)

  function drawMeme() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.drawImage(img, 0, 0, memeSize, memeSize);

    ctx.lineWidth  = 4;
    ctx.font = '20pt sans-serif';
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    var text1 = document.getElementById('inputdefault').value;
    text1 = text1.toUpperCase();
    x = memeSize / 2;
    y = 0;

    wrapText(ctx, text1, x, y, 300, 28, false);

    ctx.textBaseline = 'bottom';
    var text2 = document.getElementById('inputdefault2').value;
    text2 = text2.toUpperCase();
    y = memeSize;

    wrapText(ctx, text2, x, y, 300, 28, true);

  }

  function wrapText(context, text, x, y, maxWidth, lineHeight, fromBottom) {

    var pushMethod = (fromBottom)?'unshift':'push';
    
    lineHeight = (fromBottom)?-lineHeight:lineHeight;

    var lines = [];
    var y = y;
    var line = '';
    var words = text.split(' ');

    for (var n = 0; n < words.length; n++) {
      var testLine = line + ' ' + words[n];
      var metrics = context.measureText(testLine);
      var testWidth = metrics.width;

      if (testWidth > maxWidth) {
        lines[pushMethod](line);
        line = words[n] + ' ';
      } else {
        line = testLine;
      }
    }
    lines[pushMethod](line);

    for (var k in lines) {
      context.strokeText(lines[k], x, y + lineHeight * k);
      context.fillText(lines[k], x, y + lineHeight * k);
    }


  }


		</script>
	</body>
</html>

＆＃13;

Answer 1

在头标记中编辑元数据：

变得敏感：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

画布上的图像仅在我开始输入时显示

1 个答案: