Skip to main content
cuerpo editado
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

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 inputinput 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!

.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;
}
<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>

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 input 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!

.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;
}
<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>

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 input 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!

.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;
}
<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>

se añadieron 5 caracteres en el cuerpo
Origen Enlace
user119165
user119165

tengoTengo 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 talveztal vez con un input type="file"input 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 defaultdefault sin más acciones.

Muchas gracias!

.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;
}
<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>

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 talvez con un input 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!

.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;
}
<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>

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 input 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!

.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;
}
<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>

Origen Enlace
user119165
user119165

¿Cómo puedo reemplazar una imagen desde front-end por otra?

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 talvez con un input 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!

.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;
}
<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>