6

Gracias a la respuesta de Rene Limón, pude crear una silueta en CSS así:

#silueta img {
  -webkit-filter: grayscale(100%) brightness(0); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%) brightness(0);
  opacity: 0.6;
}
<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silueta">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>

Pero hay un problema: la silueta es negra/gris y me gustaría que fuera de otros colores para superponer varias y que se diferencie fácilmente qué corresponde a cada una de ellas.

He probado cambiando los valores del filtro para añadir hue-rotate, pero ha sido sin éxito. Probé combinando con las soluciones más votadas de esta pregunta (en inglés), pero tampoco funcionaron. También probé añadiendo diferentes filtros a div e img, pero no he tenido suerte.

Me imagino que el problema es que al poner el brillo a cero, la silueta es negra y aunque cambie el valor de hue-rotation no va a afectar porque se va a seguir quedando negra.

¿Cómo se podría conseguir una silueta con color usando CSS? ¿Qué combinación de filtros funcionaría?

0

3 respuestas 3

2

Si disminuyes el grasycale, lo que pasará es que la imagen no estará "opaca" y podrás ver el color si rotas el hue y si usas contrast y saturation. Sería muy sencillo si hubiese una opción "fill". Una forma de obtener el efecto deseado es mediante Canvas. Lo único que se tiene que hacer es dibujar la imagen, obtener su imageData y sobreescribir los colores de pintado.

Ejemplo

let palette = {
  orange: {
    red: '243',
    green: '156',
    blue: '18'
  },
  midnight: {
    red: '44',
    green: '62',
    blue: '80'
  },
  greensea: {
    red: '22',
    green: '160',
    blue: '130'
  }
}

let orange = document.getElementById('orange');
let midnight = document.getElementById('midnight');
let greensea = document.getElementById('greensea');

drawImage(orange, palette.orange);
drawImage(midnight, palette.midnight);
drawImage(greensea, palette.greensea);

function drawImage(canvas, color) {
  let ctx = canvas.getContext('2d');
  let img = new Image();

  img.onload = draw;
  fetchImage("https://i.imgur.com/XXJf1A7.png")
    .then(b64 => img.src = b64);

  function draw() {
    let hRatio = canvas.width / img.width;
    let vRatio = canvas.height / img.height;
    let ratio = Math.min(hRatio, vRatio);
    let centerX = (canvas.width - img.width * ratio) / 2;
    let centerY = (canvas.height - img.height * ratio) / 2
    ctx.drawImage(
      img,
      0,
      0,
      img.width,
      img.height,
      centerX,
      centerY,
      img.width * ratio,
      img.height * ratio
    );

    let imageData = ctx.getImageData(0, 0, img.width, img.height);
    let data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
      // rojo
      data[i] = color.red;
      // verde
      data[i + 1] = color.green;
      // azul
      data[i + 2] = color.blue;
    }

    // sobreescribe la imagen original
    ctx.putImageData(imageData, 0, 0);
  }
}

function fetchImage(image) {
  return new Promise((resolve) => {
    let http = new XMLHttpRequest();
    http.open('GET', image);
    http.responseType = 'arraybuffer';

    http.onload = function() {
      if (this.status === 200 && this.readyState === 4) {
        let blob = new Blob(
          [this.response], {
            type: 'image/png'
          }
        );
        let url = window.URL.createObjectURL(blob);
        let reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function() {
          resolve(reader.result);
        }
      }
    }
    http.send();
  });
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  padding: 20px;
}
<!-- Para navegadores que no implementen Promise -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.5/es6-promise.auto.min.js"></script>

<canvas id="orange" width="500" height="300"></canvas>
<canvas id="midnight" width="500" height="300"></canvas>
<canvas id="greensea" width="500" height="300"></canvas>

Obviamente puedes dibujar las tres formas en un solo escenario Canvas para poder moverlas. En caso de querer moverlas, se debe asociar un manejador para el evento drag en Canvas, obtener la forma de acuerdo a las coordenadas del puntero y repintar la forma actualizando la posición de acuerdo al puntero.


Nota: las imágenes que se sometan a este procedimiento deben ser alojadas localmente o vía base64, de lo contrario, se obtendrá el error "The canvas has been tainted by cross-origin data. at drawImage", lo que quiere decir que no puede tratar con una imagen de otro dominio.

0

En este post sugieren la combinación de tres filtros para colorear la imagen:

rojo

filter: grayscale(100%) sepia(100%) hue-rotate(360deg);
filter: grayscale(100%) sepia(100%) hue-rotate(0deg);

verde

filter: grayscale(100%) sepia(100%) hue-rotate(100deg);

azul

filter: grayscale(100%) sepia(100%) hue-rotate(200deg);

creo que es lo mas aproximado a lo que buscas en lo que puedes usar "filter"

0

Traducción de la respuesta que chazsolo escribió en el sitio en inglés.

En lugar de usar una escala de grises, podrías poner el contraste a 0 y entonces jugar con los otros valores. Un valor alto de saturate ayudará a marcar más los colores.

Aquí lo puedes ver funcionando:

#silhouette img {
  -webkit-filter: contrast(0) sepia(100%) hue-rotate(190deg) saturate(2000%) brightness(100%);
  filter: contrast(0) sepia(100%) hue-rotate(190deg) saturate(2000%) brightness(100%);
  opacity: 1;
}
<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.