Borde CSS en imagen PNG con partes transparentes

Question

Im tratando de agregar un borde en una imagen PNG que tengo (Ejemplo incluido). El hecho es que cuando agrego el borde actualmente, lo agrega a una forma de caja alrededor de toda la imagen y no en el vector exacto (lo que significa que incluye las partes transparentes en la imagen).

¿Hay alguna manera posible de configurar la configuración del borde que no considerará el área transparente? (? Incluso si no en CSS ... Tal vez HTML5/JS)

Answer 1

Encontré necesidad de hacer esto por mí mismo - se acercó con este truco. Una serie de imágenes superpuestas detrás de mi original que estaban un poco fuera de paso el uno con el otro. El contexto ctx3 es una copia de la imagen original y esto reproduciría una silueta blanca detrás del original varias veces.

 ctx3.shadowColor = "rgba(255,255,255,1)"; 
     ctx3.globalCompositeOperation = 'source-over'; 
     ctx3.shadowOffsetX = 2; 
     ctx3.shadowOffsetY = 2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = -2; 
     ctx3.shadowOffsetY = -2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = -2; 
     ctx3.shadowOffsetY = 2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 2; 
     ctx3.shadowOffsetY = -2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 0; 
     ctx3.shadowOffsetY = 2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 0; 
     ctx3.shadowOffsetY = -2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 2; 
     ctx3.shadowOffsetY = 0; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = -2; 
     ctx3.shadowOffsetY = 0; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 

Answer 2

A partir de ahora (de enero de 31o el año 2015) hay una manera de hacerlo sin necesidad de utilizar lienzo, con CSS puro, y con sólo 2 líneas de código.

El truco está utilizando el css filter y -webkit-filter propiedades para dibujar dos sombras de la gota sin la falta de definición, uno para el eje positivo y una para el negativo, lo que envolverá alrededor de la imagen, que proporcionará la (de esperar) efecto deseado.

Nota:: los filtros css no son compatibles en IE (esperemos que Spartan lo haga mejor), aquí hay un compatibility table.

Este primer fragmento (fiddle) aplicará el borde más simple posible.

img { 
 
    -webkit-filter: drop-shadow(1px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 black); 
 
    filter: drop-shadow(1px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 black); 
 
} 
 

 
body { 
 
    background-color: lightcoral; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

Como se puede ver, algunas imágenes (como this awesome baymax render) necesitan un poco más ajustes, se puede ver el borde derecho es un poco más pequeño que el izquierdo.

Teniendo esto en cuenta, aquí está el fragmento de borde perfeccionado (fiddle) con solo un ajuste de valor muy pequeño.

img { 
 
    -webkit-filter: drop-shadow(2px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 black); 
 
    filter: drop-shadow(2px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 black); 
 
} 
 

 
body { 
 
    background-color: khaki; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

Eso debería cubrir fronteras bastante bien, pero todavía podemos tener más diversión con esto, mira esto impresionante efecto de ligereza de fragmento de código (fiddle).

img{ 
 
    -webkit-filter: drop-shadow(1px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 white); 
 
    filter:drop-shadow(1px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 white); 
 
} 
 

 
body{ 
 
    background-color:lightblue; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

la esperanza que esto ayude a preguntarse sobre la posibilidad de una frontera envolvente para las imágenes semitransparentes!

Answer 3

He ampliado un poco la respuesta superior que es mejor para mi uso.

-webkit-filter: drop-shadow(2px 2px 0 white) 
 
\t \t drop-shadow(-2px 2px 0 white) 
 
\t \t drop-shadow(2px -2px 0 white) 
 
     \t \t drop-shadow(-2px -2px 0 white); 
 

 
\t filter: drop-shadow(2px 2px 0 white) 
 
\t \t drop-shadow(-2px 2px 0 white) 
 
\t \t drop-shadow(2px -2px 0 white) 
 
     \t \t drop-shadow(-2px -2px 0 white);

Si alguien todavía lo necesita.