0

Este código obtém uma imagem por input file e a "transforma" em caracteres
Há uma maneira de reverter a situação, com os caracteres obtidos no console.log formar a imagem novamente (jogando a imagem na div secondImageView)?
Obrigado e segue o código:

function PreviewImage() {
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
    oFReader.onload = function (oFREvent) {
        document.getElementById("uploadPreview").src = oFREvent.target.result;
        console.log(oFREvent.target.result);
        document.getElementById("txtimg").value = oFREvent.target.result;
    };
};
<html>
  <body>
    <img id="uploadPreview" style="width: 200px; height: 100px; border: 1px #000 solid" />
    <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> <br /> <br />
    <input id="txtimg" name="name_txt" class="txtimg" style="width:46px;" type="text"> <br>
    <img id="secondImageView" style="width: 200px; height: 100px; border: 1px #000 solid" />
  </body>
</html>

1 Resposta 1

1

É possível sim, basta alterar o atributo src da tag <img> que você desejar, segue exemplo abaixo.

Obs: Esses caracteres estão em base64, que é uma codificação usada para transmitir dados binários por texto.

function PreviewImage() {
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
    oFReader.onload = function (oFREvent) {
        document.getElementById("uploadPreview").src = oFREvent.target.result;
        console.log(oFREvent.target.result);
        document.getElementById("txtimg").value = oFREvent.target.result;
        
        // Modificando o src da imagem
        document.getElementById('secondImageView').setAttribute('src', oFREvent.target.result);
    };
};
<html>
  <body>
    <img id="uploadPreview" style="width: 200px; height: 100px; border: 1px #000 solid" />
    <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> <br /> <br />
    <input id="txtimg" name="name_txt" class="txtimg" style="width:46px;" type="text"> <br>
    <img id="secondImageView" style="width: 200px; height: 100px; border: 1px #000 solid" />
  </body>
</html>

1
  • Muito obg @Dobrychtop, vou estudar o código, está certíssimo !!
    – Sora
    Commented 17/07/2018 às 16:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .