Question

我想在图像上显示键入的文本（如果一个人在textarea中键入文本应该在图像上立即可见）。我开发了以下代码，但它没有在图像上显示任何内容..抱歉，我是HTML5中的新手，请指教

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

Answer 1

首先，您的“img”标记应为“canvas”标记。此外，按照当前的方式，每次用户键入文本区域时都会重新加载图像。我建议将画布直接放在图像的顶部，然后清除画布并重新绘制文本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?将画布直接放在图像上方。接受的答案在评论中有一个小提示，显示如何做到这一点。

HTML5 - 在图像上显示Textarea中的类型文本

1 个答案: