Граница CSS на изображении PNG с прозрачными частями

Я пытаюсь добавить границу на PNG-изображении, который у меня есть (пример включен). Дело в том, что при добавлении границы в настоящее время он добавляет его в форму окна вокруг всего изображения, а не на точный вектор (подразумевая, что он включает прозрачные части на изображении).

Существует ли какой-либо возможный способ настройки конфигурации границы, чтобы он не учитывал прозрачность области. (Даже если не в CSS... Может быть, HTML5/JS?)

Ответ 1

На данный момент (31 января 2015 года) существует способ сделать это без использования холста, с чистым CSS и всего лишь с двумя строками кода.

Трюк использует свойства css filter и -webkit-filter, чтобы нарисовать две тени теней без размытия, одну для положительной оси и одну для отрицательной, которая обернется вокруг изображения, что обеспечит (надеюсь ) желаемый эффект.

Примечание: фильтры css вообще не поддерживаются в IE (давайте надеяться, что спартанец сделает лучше), вот таблица совместимости.

Этот первый фрагмент ( скрипт) применит простейшую границу.

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">

Ответ 2

Я немного расширил верхний ответ, что лучше для моего использования.

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

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

Ответ 3

Приходилось делать это самому - придумал этот хак. Ряд наложенных изображений позади моего оригинала, которые были немного несовместимы друг с другом. Контекст ctx3 является копией исходного изображения, и это повторяет белый силуэт за оригиналом несколько раз.

      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);