0

我想在图像上显示键入的文本（如果一个人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">
4

1 回答 1

2

首先，你的“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;
}

查看：如何在图像上最好地覆盖画布？用于将画布直接放在图像顶部。接受的答案在评论中显示了如何做到这一点。

于 2013-04-16T16:00:49.063 回答