javascript - 输入图片中的文字

Question

我正在尝试从输入中获取文本，因为开始是“你的敌人!”我需要将这段文字放入我正在展示的图片中。我只想单击按钮，按钮将显示图片，该图片上将是文本(我还需要稍微编辑该文本的位置)可以使用 CSS 样式来使用我的位置，然后在 var 上使用它们恩？也可以多次单击该按钮，每次当我更改输入中的文本时，它都会采用新文本、删除或隐藏带有旧文本的图片并显示带有新文本的图片。

Enemy: <input type="text" value="YOUR ENEMY!" id="enemy">
    <br>
    <input type="button" value="BEAT UP YOUR ENEMY" onclick="dinos()"/>
    <br>
    <img id="loadingImage" src="dino.gif" style="visibility:hidden"/>
    <script>
    function dinos()
    {
    document.getElementById('loadingImage').style.visibility='visible';
    var en = document.getElementById("enemy").value; 
    }
    </script>

Answer 1

也许使用 z-index CSS 属性？

ENEMY: <input type="text" value="YOUR ENEMY!" id="enemy">
    <br>
    <input type="button" value="BEAT UP YOUR ENEMY" onclick="dinos()"/>
    <br>
    <img id="loadingImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="visibility:hidden"/>
<label style="z-index: 10; position: absolute; left: 30px; top: 100px;" id="LOL">Enemy's name</label>
    <script>
    function dinos()
    {
    document.getElementById('loadingImage').style.visibility='visible';
    var en = document.getElementById("enemy").value; 
      document.getElementById("LOL").innerHTML = en;
    }
    </script>

希望这对您有所帮助!