Storing image (input file) in characters and restoring in file again (?)

Question

Storing image (input file) in characters and restoring in file again (?)

Navigation

#1 by (1 votes)

0

This code gets an image by input file and "transforms" it into characters
Is there a way to reverse the situation, with the characters obtained in the console.log form the image again (throwing the image in the% div secondImageView ?)
Thanks and follow the code:

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>

javascript html5

asked by anonymous 17.07.2018 / 18:06

1 answer

Angled Routes 2+ How to use async and await in NodeJs

score 1 · Accepted Answer

You can, of course, change the src attribute of the <img> tag you want, see the example below.

Note: These characters are in base64, which is an encoding used to transmit binary data by text.

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>