Tengo el siguiente código en el que deseo que los visitantes puedan cambiar el texto (ya lo hice) y que también puedan cambiar la imagen por defecto. **No necesito que se puedan guardar los cambios**, sé que si se refresca la página los cambios se pierden, esto no es problema.

¿Es posible hacer esto tal vez con un i`nput type="file"` oculto dentro de la imagen por defecto?

He visto páginas donde inclusive es posible copiar la imagen desde el PC y luego pegarla en el espacio por *default* sin más acciones.

Muchas gracias!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .profile-pic {
      display: block;
      margin: 0 auto;
      height: 300px;
      width: 300px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
      background: url("https://academicos.uchilefau.cl/wp-content/uploads/2012/07/no_avatar15.jpg") center no-repeat;
      background-size: cover;
      max-width: 200px;
      max-height: 200px;
    }

<!-- language: lang-html -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <div class="container wrapper image-cropper">
      <div class="profile-pic"></div>
      <h1 contenteditable="true" maxlength="9" class="ngt text-uppercase mb-0 effect-shine" style="padding: 2rem 0;">NOMBRE</h1>
      <h3 contenteditable="true" class="font-weight-light mb-0" style="padding-bottom: 2rem;">Cargo</h3>
    </div>

<!-- end snippet -->