1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/michaelchou-AlloyImage

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Это зеркальный репозиторий, синхронизируется ежедневно с исходного репозитория.
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

AlloyImage — основанная на HTML5 профессиональная библиотека для обработки изображений.

Функциональные особенности

Мощные функции

  1. Обработка одного слоя не влияет на другие слои.
  2. 17 видов режимов смешивания слоёв, которые соответствуют Photoshop (PS), что упрощает бесшовное переключение с PS.
  3. Множество базовых эффектов фильтров, которые постоянно обогащаются и расширяются.
  4. Основные функции регулировки изображения, такие как оттенок, насыщенность, контрастность, яркость, кривая и т. д.

Удобство разработки

  1. Простой и быстрый API: цепная обработка, простой в использовании API, гибкая передача параметров.
  2. Комбинация множества эффектов: одна строка кода легко реализует один стиль.
  3. Дружественная поддержка параметров: двусторонняя поддержка китайских и английских параметров, снижение порога запоминания профессиональных терминов.
  4. Единый и многопоточный интерфейс: переключение между одним и несколькими потоками без изменения одной строки кода, сохранение быстрых функций API в многопоточном режиме.
  5. Предсказуемые дружественные напоминания об ошибках: напоминание о возможных ошибках, что удобно для разработки и отладки.

Богатое расширение

  1. Удобное добавление функций расширения: легко добавлять плагины фильтров.
  2. Математическая упаковка для расширения: инкапсуляция некоторых математических модулей для вызова расширений.

Рекомендации по использованию

  1. Встроенное веб-приложение рабочего стола:

    • Упаковка с использованием WebKit ядра: обработка стиля больших изображений пользователей, таких как обработка стилей пользовательских аватаров, обработка стилей альбомов пользователей (время обработки в среднем < 1 с).
  2. Приложение Win8 Metro:

    • Пользователи загружают свои аватары, обрабатывают небольшие изображения и загружают их после обработки (поддержка многопоточности в IE10 под Win8).
  3. Мобильное приложение:

    • Платформы Android и iOS, требования к обработке небольших изображений в мобильных приложениях, таких как приложения PhoneGap, обработка стилей при онлайн-загрузке аватаров и обработка стилей при обмене мобильными изображениями и т.д.

Как собрать исходный код?

Сначала клонируйте копию кода 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.

История изменений

Получение кода разработки AlloyImage версии 1.2 в release каталоге

Разработка AlloyImage версии 1.2

  1. Изменена структура кода, фильтр отделён.
  2. Добавлена поддержка инструментов: извлечение цветового спектра.
  3. Добавлен метод загрузки файлов.
  4. Добавлен фильтр «коричнево-жёлтый».
  5. Добавлен фильтр цветокоррекции.
  6. Добавлена регулировка гаммы.
  7. Код изменён, разделение Alteration.
  8. Добавлены аффинные преобразования (масштабирование, перемещение, поворот), обрезка.
  9. Добавлена дополнительная регулировка цвета.
  10. Поддержка команд кривой для регулировки каналов.
  11. Оптимизирована производительность под iOS, исправлены ошибки деформации.
Новые API версии 1.2 и выше

###$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.

&nbsp;

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

AlloyImage 1.1

  1. Оптимизация кода, улучшение производительности обработки комбинированных эффектов на 80%.
  2. Добавление эффекта комбинированной резьбы по дереву.

AlloyImage 1.0

Структура каталогов

--build каталог сборки инструменты сборки для некоторых проектов

--combined объединённый код проекта после сборки, используется для тестирования и публикации

--demo файлы демонстрационных примеров

--doc каталог документации

--release опубликованные версии файлов

--res некоторые статические ресурсы для тестирования

--src JS-исходный код проекта

alloyimage.base.js основной файл базовый файл

--module модульные файлы

  --alteration     модули настройки
   --filter         плагины фильтров

--test файлы тестов

Эти продукты используют AlloyImage

AlloyDesigner

AlloyClip

AlloyPhoto

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Библиотека для обработки изображений на основе HTML5. Расширить Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://gitlife.ru/oschina-mirror/michaelchou-AlloyImage.git
git@gitlife.ru:oschina-mirror/michaelchou-AlloyImage.git
oschina-mirror
michaelchou-AlloyImage
michaelchou-AlloyImage
master