JSFiddle - React, Tailwind, and code Playground

HTML

<form id="image-to-base64-html">
  <label for="image-upload">Bild Hochladen</label>
  <input type="file" id="image-upload" name="image-upload" accept="image/*" />
  <button type="submit">HTML Erzeugen</button>
</form>
<input type="readonly" id="html-output" />
<a id="html-copy" href="#">Kopieren</a>

JavaScript

;(function(){
  var copied_class = 'html-copied',
      html_before_image = '<img src="',
      html_after_image = '" />',
      file_to_dataURL = function(file){
        return new Promise(function(resolve, reject) {
          var fileReader = new FileReader();
        
          fileReader.readAsDataURL(file);
          fileReader.onload = function(){
            resolve(fileReader.result);
          };
        });
      };
      
  document.addEventListener('DOMContentLoaded', function(){
    var form = document.getElementById('image-to-base64-html'),
        html_output = document.getElementById('html-output'),
        copy_output = document.getElementById('html-copy');
        
    form.addEventListener('submit', function(event){
      var formData = new FormData(form);

      file_to_dataURL(formData.get('image-upload')).then(function(image_dataURL){
        html_output.value = html_before_image + image_dataURL + html_after_image;
      });
      event.preventDefault();
    });
    copy_output.addEventListener('click', function(event){
      var copy = navigator.clipboard.writeText(html_output.value);

      if ( document.body.classList.contains(copied_class) ) {
        document.body.classList.remove(copied_class);
      }

      copy.then(function(){
        document.body.classList.add(copied_class);
      });
      event.preventDefault();  
    });
  });
})();