javascript - 在图像上放置文本输入

Question

我有里面有图像的 div，也有文本框。我想要做的是在文本框中输入内容并且在我输入内容时应该使用用户定义的字体显示在图像中。是否可以使用 js/jquery？谢谢。

Answer 1

对的，这是可能的。我为你创建了一个演示。

看演示

HTML：

Title: <input type="text" id="txtbox_title" />
<br/>
<br/>
Text: <textarea id="txtbox_para" ></textarea>

<div id="imageContainer">
    <h1></h1>
    <p></p>    
</div>​

jQuery：

$("#txtbox_title").on('keyup', function(){
    var value =  $(this).val();
    $("#imageContainer h1").html(value);
});

$("#txtbox_para").on('keyup', function(){
    var value =  $(this).val();
    $("#imageContainer p").html(value);
});

​</p>

Answer 2

您可以使用任何可用的 jquery 插件。查看这个插件http://code.google.com/p/jquery-image-annotate/

在这里工作演示 - http://flipbit.co.uk/jquery-image-annotation.html