Месяц назад я писал статью о клиент-серверном скрипте Phototype, который позволяет работать с изображениями (изменять размер, создавать эффект наброска, отбрасывать тень и др.) с использованием JavaScript. Работает он следующим образом: на стороне клиента выполняется скрипт, в котором указываем путь к изображения и что нам нужно сделать с ним, в результате создается элемент <img>, который указывает на скрипт php, выполняющий необходимые преобразования с помощью библиотеки GD. Таким образом можно динамически создавать и изменять нужные нам изображения, управляя всем процессом из JavaScript.

На днях мне довелось использовать этот скрипт на практике и сразу же обнаружились некоторые недостатки, исправив которые я получил новый скрипт, которым и хочу поделиться с вами. Но сначала о недостатках старого скрипта. Первый недостаток это зависимость скрипта от библиотеки Prototype. Во многих случаях использование JavaScript фреймворков является плюсом, ибо значительно облегчает дальнейшую работу со скриптами, но не в этом случае, ибо скрипт использовал всего лишь пару возможностей Prototype, а именно создание класса Photo и создание элемента img. Подключать ради этого такую большую библиотеку просто неразумно. В моем случае на сайте использовалась библиотека Mootools, и подключать дополнительную Prototype я желания не имел, отчего и пришлось переработать скрипт. Второй недостаток, это отсутствие поддержки прозрачности для изображений. Если я использовал, к примеру, эффект вращения, то фон возле изображения обязательно заполнялся белым цветом. То же самое и при добавлении тени, где на фоне теней виднелся белый фон. То есть, такие эффекты скрипта, как вращение и отбрасывание тени, можно эффективно применять только на белом фоне, иначе получается совсем не то, что хотелось бы.

Теперь о том, что же я исправил в скрипте. Во первых полное избавление от зависимости со стороны Prototype. Во вторых добавлена поддержка прозрачности и возможность устанавливать цвет фона при помощи функции setBgColor():

var img = new Photo().load('image.jpg').addCaption('Hello').setBgColor(255,255,255,10);
document.getElementById('e10').appendChild(img.fetch());

Первые три параметра функции setBgColor() - это значения для красного, зеленого, и синего цветов (0 - 255), а последний, четвертый параметр - это значение прозрачности (0 - 127).

В третьих, добавлена возможность добавлять дополнительное изображение поверх основного. Верней сказать, не добавлена а исправлена такая возможность, ибо в старой версии существовала функция addChuckNorris(), которая добавляла гордый профиль Чака Норриса поверх изображений (автор либо его поклонник либо просто шутник ). Я эту функцию преобразовал в addForeImage():

var img = new Photo().load('photo.png').addForeImage('chuck.png');
document.getElementById('e2').appendChild(img.fetch());

В качестве параметра она принимает имя файла JPEG или PNG, который должен быть в папке images. Скрипт автоматически изменяет размер изображение и помещает поверх основного в крайнем левом углу (возможность управлять размерами и положением этого изображения будет полем деятельности при разработке следующей версии).

В четвертых, добавлена возможность работать не только с файлами JPG , но и с файлами PNG, что при возможностях последнего делает скрипт значительно более полезным.

Ну и последнее, в моем скрипте можно устанавливать путь к библиотеке при помощи функции setImgPath(). То есть, если вы поместили библиотеку в /demo/phototype , то для правильного отображения нужно вызывать функцию следующим образом:

var img = new Photo().setImgPath('/demo/phototype');

В старом скрипте путь указывался относительным, т.е. изображения имели атрибут src=”image.php?…..”, и если скрипт располагался где-то во вложенных папках, то браузер просто не находил его.

На этом все мои усовершенствования и заканчиваются, хотя поле деятельности здесь потенциально очень большой и ограничивается лишь возможностями библиотеки GD. Есть также идею заюзать какую-нибудь библиотеку вроде Aside, которая может делать и ресайз и водяные знаки и многое другое. Может из этого что-нибудь и получится.

скачатьсмотреть демо

Запись добавлена 1 июля 2008 в категории Эффекты, скрипты.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.