[Открытый исходный код] Обрезка изображения холста, сжатие, поворот

внешний интерфейс GitHub Открытый исходный код Canvas

предисловие

Некоторое время назад я столкнулся с мобильным терминалом, которому нужно обрезать, сжимать и поворачивать изображения.
Учитывая, что имеющиеся колеса не подходят, я сделал новое колесо самостоятельно.

Об обрезке и сжатии изображений

В эпоху HTML5canvasФункция уже очень мощная и может выполнять операции на уровне пикселей. Как и обрезка изображения, сжатие основано наcanvasбыть реализованным.

Что касается принципа, то это не что иное, как использованиеcanvasВстроенный API, самое сложное это рамка обрезки и расчет координат после поворота, так что не буду вдаваться в подробности.

Обрезка и сжатие изображения в этой статье основаны наcanvasЗавершенный.

обрезка изображения

Особенности включают в себя:

  • canvasрисовать картинки

  • Поле обрезки выберите размер обрезки

  • Функция вращения

  • Увеличительное стекло (легко вращается)

  • Функция обрезки

  • Масштабирование, функции сжатия (управляемые параметрами)

Пример

Proxies.GitHub.IO/image-Proc E…

image
image

Эффект

image
image

image
image

image
image

image
image

[Ошибка загрузки изображения... (image-c687d7-1510800462845)]

использовать

представлять

dist/image-clip.css
dist/image-clip.js

глобальная переменная

ImageClip

метод вызова

var cropImage = new ImageClip(options);

cropImage.method()

API

resetClipRect

Снова сбросить поле обрезки до самого большого

cropImage.resetClipRect();

clip

Обрезать изображение в соответствии с текущим полем обрезки

cropImage.clip();

getClipImgData

получить обрезанное изображение

var base64 = cropImage.getClipImgData();

rotate

Повернуть изображение

cropImage.clip(isClockWise);

destroy

Уничтожить текущий объект отсечения

Если контейнеру необходимо регенерировать объекты обрезки, обязательно сначала уничтожьте предыдущие.

cropImage.destroy();

Более

О подробном описании параметров и большем использовании

Пожалуйста, обратитесь к源码

Масштабирование изображения

Вышеупомянутая обрезка изображения на самом деле имеет функцию масштабирования, но поскольку она основана на всем процессе обрезки, она не удовлетворяет некоторым сценариям (например, только для сжатия изображения).

Поэтому масштабирование изображения вынесено отдельно в модуль, подходящий для таких сценариев.

Особенности включают в себя:

  • Масштабирование и сжатие изображения

  • Некоторые часто используемые алгоритмы масштабирования (бикубический, билинейный, метод ближайшего соседа)

Пример

Proxies.GitHub.IO/image-Proc E…

Proxies.GitHub.IO/image-Proc E…

image
image

Эффект

пример грубый

image
image

использовать

представлять

dist/image-scale.js

глобальная переменная

ImageScale

метод вызова

ImageScale.method()

API

scaleImageData

правильноImageDataвведите данные для масштабирования, поместив данные в новыйImageDataсередина

ImageScale.scaleImageData(imageData, newImageData, {
    // 0: nearestNeighbor
    // 1: bilinearInterpolation
    // 2: bicubicInterpolation
    // 3: bicubicInterpolation2
    processType: 0,
});

scaleImage

правильноImageобъект типа для масштабирования, возвращающийbase64нить

var base64 = ImageScale.scaleImage(image, {
    width: 80,
    height: 80,
    mime: 'image/png',
    // 0: nearestNeighbor
    // 1: bilinearInterpolation
    // 2: bicubicInterpolation
    // 3: bicubicInterpolation2
    processType: 0,
});

compressImage

сжатие изображения, возвращаетbase64нить

Разница с масштабом в том, что он использует холст для автоматического масштабирования, и есть много параметров, которыми можно управлять.

var base64 = ImageScale.compressImage(image, {
    // 压缩质量
    quality: 0.92,
    mime: 'image/jpeg',
    // 压缩时的放大系数，默认为1，如果增大，代表图像的尺寸会变大(最大不会超过原图)
    compressScaleRatio: 1,
    // ios的iPhone下主动放大一定系数以解决分辨率过小的模糊问题
    iphoneFixedRatio: 2,
    // 是否采用原图像素（不会改变大小）
    isUseOriginSize: false,
    // 增加最大宽度，增加后最大不会超过这个宽度
    maxWidth: 0,
    // 使用强制的宽度，如果使用，其它宽高比系数都会失效，默认整图使用这个宽度
    forceWidth: 0,
    // 同上，但是一般不建议设置，因为很可能会改变宽高比导致拉升，特殊场景下使用
    forceHeight: 0,
});

Более

О подробном описании параметров и большем использовании

Пожалуйста, обратитесь к源码

совершенство и неадекватность

Несмотря на то, что некоторые отмеченные функции были реализованы, с точки зрения деталей еще многое предстоит улучшить.

Например, рамки обрезки реализованы неэлегантно.

Например, вращение не поддерживает другие углы.

Например, внутренний исходный код нуждается в оптимизации.

...

Хотя говорят, что есть планы провести рефакторинг в определенное время в будущем, учитывая фактический график, возможно, придется подождать долгое время.

исходный код

Обрезка изображения:

GitHub.com/proxyword/image…

Масштабирование изображения:

GitHub.com/proxyword/image…

Категории