Добавление свечения / границы к краю только непрозрачной части изображения с использованием JavaScript

Question

Я пытаюсь придумать способ имитировать то, что мы ранее делали в Adobe Flash, используя какой-то битмап-фильтр, но вместо этого с чистым javascript.

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

W / javascript Я могу легко добавить рамку вокруг всего изображения при нажатии, но это не то, к чему я стремлюсь. Я хочу только рамку вокруг непрозрачной части изображения.

Я, к сожалению, недостаточно знаком с методами манипулирования изображениями, поэтому мне любопытно, есть ли способ, которым я мог бы добиться этого, используя различные библиотеки JS для манипулирования изображениями аля BitmapData или Pixastic . Взглянув на оба эти вопроса, мне интересно, могу ли я что-нибудь сделать с обнаружением краев, эффектами свечения и наложениями ...

Answer 1

Если вы уже используете Raphael (или готовы его использовать), вы можете рассмотреть возможность использования плагина Дмитрия blur . Основываясь на этом ответе , я смог добиться эффекта свечения, который, я думаю, вы ищете, добавив другое изображение позади того, которое я хотел бы "светиться". Фоновое изображение размыто, давая "свечение" или "ореол" вокруг четкого изображения сверху.

Пример кода:

var img = this.R.image("yourImage.png", 0, 0, 50, 50);
var glow = img.clone().toBack();
glow.blur(5);

Плагин содержит предупреждение о том, что WebKit не поддерживается. Кажется, что теперь некоторая поддержка WebKit работает, так как он работает в Chrome (у меня 18.0), но не Safari (у меня 5.1.5).

Answer 2

Я не уверен, что это полностью подходит для вашей ситуации, но есть инструменты для преобразования Flash в HTML (например, Swiffy ). Я подозреваю, что они иногда могут быть облупленными, но это то, что нужно учитывать:)

Answer 3

I only want a border around the non-transparent portion of the image.

Невозможно сделать это с помощью js. Только если замена изображения уже подготовлена. Canvas на самом деле не является решением (если вам нужна совместимость), и все эти «вычисления» потребуют ресурсов и времени.