AlloyImage — основанная на HTML5 профессиональная библиотека для обработки изображений.
Встроенное веб-приложение рабочего стола:
Приложение Win8 Metro:
Мобильное приложение:
Сначала клонируйте копию кода AlloyPhoto на локальный компьютер с помощью git clone:
git clone git://github.com/AlloyTeam/AlloyPhoto.git
Затем установите modjs с помощью npm:
npm install -g modjs
После успешной установки выполните следующие команды:
cd AlloyPhoto && mod dist
Успешная сборка создаст файл alloyimage.js в каталоге ./js/combined.
###$AI или AlloyImage Инициализировать объект AlloyImage
Добавить новый параметр AIObj $AI(HTMLImageObj img[, Number width, Number height]);
{img} изображение элемента
{width} ширина масштабирования (необязательно)
{height} высота масштабирования (необязательно)
Если width или height равны null, используется пропорциональное масштабирование, если оба значения равны нулю, используется ширина изображения
Советы: при использовании под iOS рекомендуется использовать параметр width для масштабирования изображений из альбома, использование масштабирования под iOS может привести к невозможности рисования на Canvas, если изображение слишком большое
Пример
var ps = $AI(img, 600).save('jpg', 0.6);
###save Сохранить составное изображение в виде строки base64
base64String save(String filetype [, Number comRatio]);
{filetype} тип изображения, поддерживает png, jpg, gif и т. д.
{comRatio} для изображений jpg, коэффициент сжатия изображения или качество изображения, от 0 до 1
Возвращает строку base64
Пример
var string = AlloyImage(img).save('jpg', 0.8);
###saveFile Сохранить составное изображение на диск
void saveFile(String fileName[, Number comRatio]);
{fileName} имя файла изображения, если не указано расширение, по умолчанию используется формат png
{comRatio} для изображений jpg коэффициент сжатия изображения или качество изображения от 0 до 1
Возвращаемое значение пусто
Пример
img.onclick = function(){
AlloyImage(this).saveFile('обработанное изображение.jpg', 0.8);
}
###download Функция аналогична saveFile
###transform Выполнить аффинное преобразование
AIObj transform(Array Matrix);
{Matrix} матрица преобразования, массив [a1, a2, b1, b2, dx, dy]
Например, горизонтальное отражение [-1, 0, 0, 1, 0, 0]
Пример
//Вертикальное отражение слоя
AlloyImage(img).transform([1, 0, 0, -1, 0, 0]).show();
###scaleTo Масштабировать слой или составное изображение до указанной ширины и высоты
AIObj scaleTo(Number width, Nubmer height);
{width} ширина
{height} высота
Если не указано одно из значений, используется пропорциональное масштабирование
Возвращается AIObj
Пример
//Масштабируем слой до 100px * 100px
AlloyImage(img).scaleTo(100, 100).show();
//Пропорционально масштабируем слой до высоты 50px
AlloyImage(img).scaleTo(null, 100).show();
###scale Масштабировать слой или составное изображение с указанным коэффициентом
AIObj scale(Number xRatio, Nubmer yRatio);
{xRatio} коэффициент масштабирования по горизонтали
{yRatio} коэффициент масштабирования по вертикали
Если одно из значений не указано, используется пропорциональное масштабирование
Возвращается AIObj
Пример
//Масштабируем слой в 2 раза по ширине и в 2 раза по высоте
AlloyImage(img).scale(2, 2).show();
//Пропорционально масштабируем слой в 3 раза
AlloyImage(img).scale(3).show();
###rotate Повернуть слой или составное изображение на указанный угол
AIObj rotate(Numbe degree);
{degree} угол поворота по часовой стрелке, в градусах
Возвращается AIObj
Пример
//Поворачиваем слой на 30 градусов
AlloyImage(img).rotate(30).show();
###clip Обрезать слой или составное изображение
AIObj rotate(Numbe x0, Number y0, Number width, Number height);
{x0} начальная координата по горизонтали
{y0} начальная координата по вертикали
{width} ширина обрезки изображения
{height} высота обрезки изображения
Возвращается AIObj
Пример
//Обрезаем слой начиная с (30, 30) шириной 100 пикселей и высотой 100 пикселей, получаем строку изображения base64
var imgString = AlloyImage(img).clip(30, 30, 100, 100).save('jpg', 0.8);
###drawRect Нарисовать гистограмму составного изображения
void drawRect(String seletor, String channel);
{seletor} селектор гистограммы
{channel} канал для рисования, например 'RG', 'GB', по умолчанию 'RGB'
Возвращаемое значение пустое
Пример
var imgString = AlloyImage(img).drawRect('#p');
``` Сохранить промежуточные результаты view, в следующий раз при использовании view обработка будет проводиться на основе результатов, полученных до doView, и в сочетании с undoView можно выполнить операцию отмены.
AIObj doView();
Возвращает AIObj
Пример см. в методе undoView.
>###undoView
Отменить выполнение последнего view.
AIObj undoView();
Возвращает AIObj.
Пример:
```javascript
var layer = $AI(img);
layer.view("setHSI", 10, 0, 0).show();
// Повторно настроить, но всё ещё на основе исходного изображения
layer.view("setHSI", -10, 0, 0).show();
// Настройка завершена, сохраняем текущий результат
layer.doView();
// Основываясь на предыдущей настройке, выполняем расчёт
layer.view("brightness", 10, 0, 0).show();
// Не удовлетворены результатом, отменяем настройку яркости
layer.undoView().show();
// Возвращаемся к исходному изображению
layer.undoView().show();
--build каталог сборки инструменты сборки для некоторых проектов
--combined объединённый код проекта после сборки, используется для тестирования и публикации
--demo файлы демонстрационных примеров
--doc каталог документации
--release опубликованные версии файлов
--res некоторые статические ресурсы для тестирования
--src JS-исходный код проекта
alloyimage.base.js основной файл базовый файл
--module модульные файлы
--alteration модули настройки
--filter плагины фильтров
--test файлы тестов
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )