Блюр
Задача
Сделать для изображения эффект размытия (блюра).
Решение
В Сети встретил несколько готовых сценариев. Больше всего понравилось решение от мистера Klingemann. Если быть более точным он предлагает несколько решений, но в целом их применение однотипное. Живой пример. Работает в:
- IE 9
- Firefox 3.6+
- Opera 10+
- Chrome
- Safari 5
Быстрый старт
Подключаем плагин:
<script src="path-to/superFastBlur.js"></script>
Картинке, к которой будет применен эффект, указываем id. Добавляем в HTML код элемент <canvas> тоже с id.
<canvas id="scene" width="600" height="400"></canvas> <img src="path-to/img-name.jpg" id="img" width="300" height="225" />
Размеры холст можно указать любые, при отработке плагина они будут заменены на размеры, соответствующие размерам изображения.
Вызываем функцию boxBlurImage, поcле того как требуемое изображение загружено:
function init()
{
var sourceImageID = "img", // id изображения к которому применяем эффект
targetCanvasID = "scene", // id холста на котором будет отображено изображение с эффектом
radiusStart = 30, // радиус размытия
blurAlphaChannel = false, // добавить ли прозрачность полученному изображению
iterations = 1; // к-во итераций за которое должен примениться эффект. может использоваться для плавности применения эффекта. больше итераций - больше требуется ресурсов
boxBlurImage( sourceImageID, targetCanvasID, 30, blurAlphaChannel, iterations );
}
window.onload = init;
В качестве демонстрации приведу еще два примера:
Хотя все современные браузеры давно заявили о поддержке HTML5 Canvas, практика показала, что эта поддержка в разных браузерах разная. Поэтому плавность смены размытия в некоторых браузерах «летает» (например, firefox 7), а в некоторых кошмарно тормозит (opera 11).
Где качать
Плагин можно скачать на странице от разработчика. Там же ссылки на другие варианты реализации эффекта размытия.