0
안녕하세요 저는 JavaScript에 익숙하지 않습니다. 제 문제는 저에게 엠씨 제너레이터를 만들려고하는데 문제가 생겼습니다. 캔버스의 이미지가 타이핑을 시작하십시오. 이미지에 첨부 된 것과 같은 밈을 얻고 싶습니다. 문제가 무엇인지 확실하지 않습니다.
캔버스의 이미지가 입력을 시작할 때만 표시됩니다.
캔버스에서 이미지를 반응시키는 방법을 잘 모르겠습니다. 도움 주셔서 감사합니다.
<html>
\t <head>
\t \t <title>Meme Generator</title>
\t \t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\t \t <style></style>
\t \t
\t \t <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
\t \t
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
\t \t <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
\t \t
\t </head>
\t
\t <body>
\t
<div class="container"/>
</canvas> \t \t
\t \t <div class="row">
<div class="col-md-2">
\t \t <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>
\t \t
\t \t </div>
\t \t
<div class="col-md-6">
\t \t
\t \t <div id="panel">
\t \t <canvas id="memecanvas">
<img id="largeImage" src="https://i.imgur.com/x8La5Km.jpg" class="img-responsive" />
</canvas>
\t \t </div>
\t \t
\t \t </div>
<div class="col-md-4">
\t \t <div class="form-group">
<input class="form-control" id="inputdefault" type="text">
</div>
\t \t <div class="form-group">
<input class="form-control" id="inputdefault2" type="text">
</div>
\t \t <button type="button" class="btn btn-primary btn-block">CLEAR</button>
\t \t <button type="button" class="btn btn-primary btn-block">SHARE ON FACEBOOK</button>
\t \t
\t \t
\t \t
\t \t </div>
</div>
</div>
\t
\t \t
\t \t
\t
\t \t <script>
\t \t $('#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);
}
}
\t \t </script>
\t </body>
</html>
이 질문을 업데이트하시기 바랍니다. –
코드 스 니펫 실행을 클릭하고 오류, 수정 오류를 참조하십시오. –