<body>
  <main>
    <h1>L'interMEDIAire</h1>
    <hr>
    <form action="#">
      <input id="inputTypeFile" type="file" onchange="encodeImageFileAsURL();" />
      <hr>
      <input
             id="InputTypeText"
             type="text"
             value="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U">
      <input type="button" onClick="convertUrTo64()" value="Convertir">
    </form>
    <hr>
    <h2>Résultat :</h2>
    <div id="result"></div>
  </main>
</body>
/*COULEURS*/
$noir:        rgba(0,0,0,1);
$noirfonce:   rgba(29,31,32,1);
$noiropaque:  rgba(29,31,32,.9);
$rose:        rgba(152,38,114,1);
$bleu:        rgba(128,155,189,1);
$blanc:       rgba(255,255,255,1);
$gris:        rgba(55,55,55,1);
$gris2:       rgba(255,255,255,.8);
$gris3:       rgba(204,204,204,1);
$padding:     20px 10px;

/*TOUS LES ELEMENTS*/
*,*:after,*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  margin: 0px auto;
  width: 640px;
  background: $noir;
  color: $blanc;
  font-size: 1em;
  padding: $padding;
}

main {
  padding: $padding;
  background: $noirfonce;
}

a,
input[type="file"],
input[type="button"],
button {
  display: block;
  margin: 24px 0px;
  padding: 12px;
  width: 123px;
  color: $bleu;
  text-decoration: none;
  background: $noir;
  transition: all .3s ease-in-out;

  &:hover,
  &:active {
    color: $blanc;
    background: $rose;
    cursor: pointer;
  }
}

h1 {
  margin: 0;
  padding: 0;
  font-size: 1.4em;
  color: $bleu;
}

h2 {
  margin-top: 15px;
  width: 100%;
  color: $rose;
}

h1,h2,h3 {
  font-family: 'Inconsolata', monospace;
}

hr {
  margin-top: 20px;
  border: 0px solid $bleu;
  border-bottom-width: 1px;
}

input[type="text"],
input[type="file"]{
  padding: 12px;
  width: 100%;
  color: white;
  background: transparent;
}

/*www.lintermediaire.be*/
View Compiled 


function readAsDataURL(url, result) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      result(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

function convertUrTo64() {
  var InputTypeText = document.getElementById("InputTypeText").value;
  readAsDataURL(InputTypeText, function(result) {
    /*
      document.getElementById("result").innerHTML = result;
    */
    var newImage = document.createElement('img');
    newImage.src = result;
    document.getElementById("result").innerHTML = newImage.outerHTML;
  });
}

  function encodeImageFileAsURL() {
    var filesSelected = document.getElementById("inputTypeFile").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];
      var fileReader = new FileReader();
      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result;
        var newImage = document.createElement('img');
        newImage.src = srcData;
        document.getElementById("result").innerHTML = newImage.outerHTML;
      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.