HTML5 - 在圖像上顯示從Textarea輸入的文本

我想在圖像上顯示輸入文本（如果某人輸入的文本在textarea中應該立即可見）。我已經開發了下面的代碼，但它`不顯示圖像什麼..對不起，我在HTML5是新手，請指教HTML5 - 在圖像上顯示從Textarea輸入的文本

<script type="text/javascript"> 
function test(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 
    imageObj.onload = function(){ 
     context.drawImage(imageObj, 10, 10); 
     context.font = "40pt Calibri"; 
     context.fillText("My TEXT!", 20, 20); 
    }; 
    imageObj.src = "smallimage.jpg"; 
}; 
</script> 

</head> 

<body> 
<textarea onchange="test();" id="txtContents"></textarea> 
<img src="smallimage.jpg" id="myCanvas">

來源

2013-04-16 user580950

首先，你的「IMG」標籤應該是「畫布」的標籤。另外，按照目前的方式，每次用戶輸入文本區域時都會重新加載圖像。我建議直接在圖像上放置畫布，然後清除畫布並重新繪製onchange（）文本。嘗試是這樣的：

<script type="text/javascript"> 

function changeText(textarea){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var text = textarea.value; 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.fillText(text, 20, 20); 
} 
</script> 

</head> 

<body> 
<textarea onkeyup="changeText(this);" id="txtContents"></textarea> 
<div class="outer"> 
<img src="smallimage.jpg" class="box" id="myImage" /> 
<canvas class="box" id="myCanvas" width="100" height="100"></canvas> 
</div> 
</body>

CSS：

.outer{ 
    position: relative; 
} 
.box { 
    width: 100px; 
    height: 100px; 
} 

#myImage { 

} 

#myCanvas { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
}

退房：How to best overlay a canvas on an image?可以直接在圖像的頂部放置在畫布上。接受的答案在評論中有一個小提示，表明如何去做。

來源

2013-04-16 16:00:49 Niro

...你會想要使用onkeyup而不是onchange，因爲onchange只會在用戶離開textarea時觸發。這裏是一個例子小提琴：http://jsfiddle.net/m1erickson/NuaHp/ – markE

HTML5 - 在圖像上顯示從Textarea輸入的文本

回答

相關問題