How to appear what I typed in the input in an image

Navigation
0

Hello, I would like to know how I can do the following, I have several images with names, and I created a script in js for me to type in the input and what I typed appears underneath, and this time I would like you to create an image. Example: I write the name "andre". I wanted the "img" (html) command to be left with the "src" link for this image, for example, I would already write the directory, and only came in the name "andre" in the middle.

Ex:

My script with input: 

<script type="text/javascript">
window.mostrarTexto= function(valor){
  var campo = document.getElementById("campo").value;
  div.innerHTML = campo; 
}
</script>

HTML: 

<input id="campo" type="text" onkeyup="mostrarTexto(this.value)"/>
<div id="div" style="display:block"></div>
    
asked by anonymous 21.07.2015 / 19:01

1 answer

2

Following more or less my answer in your other question You can use the canvas element of HTML5 to create the image as you type. 

window.escreveNoCanvas = function(mensagem){
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  
  //função criar a base branca do canvas
  context.fillStyle = "white";
  context.beginPath();
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.fill();
  
  //aqui eu crio a mensagem
  context.font = '9pt Arial';
  context.fillStyle = 'black';
  context.fillText(mensagem, 0, canvas.height/2);

  //desenha tudo que foi escrito anteriormente no canvas
  context.stroke();
}
<input type="text" onkeyup="escreveNoCanvas(this.value)">
<canvas id="myCanvas"></canvas>

EDIT *

If you only want to change the path of the image, you can simply do this: 

window.mudaImagem = function(mensagem){
  var imagem = document.getElementById('imagem');
  imagem.src = "https://www."+mensagem+".com.br/images/srpr/logo11w.png";
}
Digite <b>"google"</b>: <input type="text" onkeyup="mudaImagem(this.value)"><br/><br/><br/>
<img id="imagem" src="##"/>
    
21.07.2015 / 19:21
JavaScript function does not work how to use the sortable JQuery update method?