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

Asked

Viewed 753 times

0

Hello, I would like to know how I can do the following, I have several images with names, and created a script in js for me to type in the input and what I typed appear below, and this time I would like you to form an image. Example: I write the name "Andre". I wanted the command "img" (html), to have the "src" for the link of this image, for example, I would write the directory, and only come 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>
javascript html

  • I couldn’t understand the question. Do you want to rename the image with what is typed? Or call the image that matches the typed one?

  • Like, I type in the input the name "Andre" and it appears in the image directory as if the image name was Andre. If I write "Oberto" will appear the image of this Oberto. I could understand?

1 answer

2

Following more or less my answer in your another question You can use the element canvas of HTML5 to create the image when typing.

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’re just going to change the path image you can do simply like 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="##"/>

  • I understand what you did, but that’s not it. Like, I have an image whatever her name (on file) is Andre.png, and wanted that after I wrote the name "Andre" in the input the src img would work. And that there was a place for me to put the directory, where there would be the names of all the names I would put in the input.

  • If you need a practical example, I can edit my question.

  • @fkda edited the answer, now, what you mean by "a place for me to put the directory, where there would have the name of all the names I would put"?

  • I was able to edit it the way I wanted it, your edition. It worked fine, but only missing a little thing, I wanted that when the person entered an image, then only if the person touched the input that would change, for you to understand more, look what I wanted:

  • window.typeNoCanvas = Function(message){ var imagem = Document.getElementById('image'); imagem.src = "http://localhost:8090/howper/media/img/"+message+". png"; }

  • in html: <img id="imagem" src="##"/> you just define the src="caminhoDaImagemPadrão.jpg"

  • 1

    Ah yes, thank you very much. Solved.

Show 2 more comments

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.