Компьютерная обработка изображений — очень зрелая технология, и любой язык, который может взаимодействовать с операционной системой, может легко реализовать различные операции обработки. Тем не менее, внешний интерфейс ограничен средой браузера и ограничениями интерфейса, и его будет неудобно обрабатывать.Без каких-либо серверных службЧистая интерфейсная реализация обработки изображений. В этой статье будет представлена обработка растровых изображений холста, векторной графики SVG и обработка изображений CSS3 с упором на холст, а также будет добавлена заключительная часть.Апплет TrimPNG.
обработка растрового изображения холста
Холст HTML5 предоставляет нам холст, так что фронтенд также имеет функцию работы с растровыми изображениями: поворот изображения, масштабирование, фильтрация, сжатие и т. д. могут быть реализованы через JS.
базовая обработка изображений
Установив параметр drawImage, можно выполнять такие операции, как рисование изображения, масштабирование, растяжение и обрезка (注意canvas无法绘制体积过大图片，否则会卡甚至崩掉，大图可以分块读取绘制):
Подробная справка по использованиюdrawImage(), Исходный код DEMO нажмите здесьJS Bin.
Только один метод drawImage необходим для реализации основных функций обработки графики, а затем в сочетании с событиями мыши или колеса могут быть реализованы более сложные функции, такие как предварительный просмотр с частичным увеличением и масштабирование.
Обработка фильтра изображения
В настоящее время, когда вы отправляете картинку в круг друзей, вам нужно использовать фильтр для его украшения. Есть все виды стилей ретро и чистого фильма Ломо. Canvas предоставляет метод Getimagedata для получения информации о RGBA каждого пикселя на изображении, чтобы мы могли выполнить обработку на уровне пикселей на изображении. Перепишите информацию пикселя в imagedata через определенный алгоритм, а затем используйте метод setimagedata для перерисования новых данных на холсте, чтобы серию функций, таких как кодирование фильтра изображения и специальные эффекты.
Например, теперь мы хотим реализовать ретро-фильтр:
// 复古滤镜处理算法：获取每个像素的RGB信息，并按特定权重返回其加权平均值
let sepiaFilter = function(imgData) {
let d = imgData.data
for (let i = 0; i < d.length; i += 4) {
let r = d[i]
let g = d[i + 1]
let b = d[i + 2]
d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) // red
d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) // green
d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) // blue
}
return imgData
}
//图像地址必须和当前页面同域，否则会报cross-origin错误
img.src = '/img/logo@2x.png'
img.onload = () => {
ctx.drawImage(img, 0, 0) // 绘制原图
let imgData = ctx.getImageData(0, 0, img.width, img.height) // 获取图片信息
ctx.putImageData(sepiaFilter(imgData), 100, 0) // 绘制处理后图片
}Подробная справка по использованиюgetImageData()а такжеputImageData(), Исходный код DEMO нажмите здесьJSFiddle.
Ключ к обработке фильтра лежит в алгоритме фильтра. Чтобы написать более сложные спецэффекты, вам необходимо иметь основы компьютерной графики, а также понимать математические знания, такие как матрица свертки, преобразование Лапласа и преобразование Фурье. Эта яма очень большой.копать не буду.
Хранилище изображений base64
После добавления специальных эффектов, если мы хотим сохранить изображение, мы можем использовать метод toDataURL для форматирования и сжатия изображения.
// 支持三种文件类型：image/png(默认) | image/jpeg | image/webp(仅Chrome)
canvas.toDataURL() // 默认存储为png
// 仅jpeg/webp支持质量参数(0~1,默认0.92)
canvas.toDataURL("image/jpeg", 0.1) // 存储为质量为0.1的jpegТак как форматом хранения является кодировка base64, каждые три байта исходного изображения будут расширены до 4 байтов, поэтому общие закодированные данные будут примерно на 1/3 больше, чем исходные. Ниже приведены сравнительные данные, относящиеся к размеру изображения, сохраненного через toDataURL, и исходного изображения (数据仅供参考，不具通用性):
Видно, что объем изображения после хранения не составляет 4/3 от исходного изображения, на самом деле обработанное изображение будет в несколько раз больше исходного изображения, а увеличенный объем разных изображений также является неопределенным. Если вы хотите загрузить изображения на сервер, вы можете преобразовать base64 в двоичные данные Blob для сжатия и загрузки; если вы хотите отобразить их непосредственно во внешнем интерфейсе или для загрузки пользователями, вы можете установить параметр качества для jpg, но если это png, он не может быть сжат.
Просто использовать toDataURL недостаточно, пользователю нужно передать手动点击图片-右键图片存储为Чтобы сохранить изображение, если вы хотите нажать кнопку загрузки для автоматической загрузки изображения, вам необходимо изменить тип изображения на поток октетов, а затем использовать атрибут загрузки HTML5, чтобы заставить браузер выполнить загрузку.
Подробная справка по использованиюtoDataURL().Автоматическая загрузка исходного кода DEMO картинки быстро ткните меняJSFiddle.
Запасное колесо программиста
С вышеупомянутой основой в сочетании с зрелыми алгоритмами обработки графики мы можем выполнить большинство требований к обработке изображений в повседневной работе.Ниже перечислены некоторые связанные колеса, которые можно использовать в качестве запасных шин. Чем больше запаска, тем лучше, а вдруг она в дальнейшем будет использоваться?
注意：本人很专一。
html2canvas
Принцип создания скриншотов веб-страниц через холст состоит в том, чтобы пройти через структуру и стили DOM, затем нарисовать их в холсте и вывести изображения через toDataURL. Однако из-за ограничения политики одного и того же происхождения изображений холста, если источник изображения и веб-сайт различны, он не будет перехвачен. Кроме того, при тестировании в WeChat возникают проблемы со снимками, снятыми с одного и того же исходного изображения, поэтому, если вы хотите использовать его в производственной среде, вам все равно придется смотреть на сцену, а там много ям, на которые нужно наступить. .
code-to-image
Код для инструмента изображения. Иногда вы пишете статьи и вставляете коды на разных платформах. Из-за разных спецификаций форматирования кода на разных платформах часто возникают проблемы с набором кода. Использование этого инструмента для преобразования кода в изображения позволяет избежать проблем с набором текста.
Cropper
Приложение, специально разработанное для обрезки изображений.
tracking.js
Это профессиональная JS-библиотека для обработки компьютерного зрения, которая содержит большое количество алгоритмов обработки графики, которые можно использовать для интересных функций, таких как распознавание лиц и отслеживание цвета.
qrcode2
Используя JS для динамической генерации QR-кода, эта библиотека по-прежнему очень практична.Принцип - алгоритм qrcode + рисование холста, который не поддерживает совместимость холста с таблицей.
AlloyImage
Основанный на HTML5 движок Tencent для обработки изображений профессионального уровня с открытым исходным кодом очень мощный, как и веб-версия PS.
Перечисленные выше, больше запасных шин здесь:github.com/0326/canvas
Обработка векторов SVG
После разговора о растровых изображениях, давайте поговорим о векторной графике. Векторная графика широко используется в рисовании иконок, бизнес-логотипов и элементов анимации. Векторная графика, поддерживаемая Интернетом, сначала была не текущим SVG, а VML, продвигаемым Microsoft. Поэтому в более низкой версии IE вместо SVG поддерживается только VML. Только позже SVG стал стандартом W3C. и стал популярен.Майкрософт не поддерживал его в IE9.SVG.
SVG соответствует спецификации XML и хорошо интегрируется в HTML, поддерживает управление скриптами JS, поддержку динамического контента на основе стандарта SMIL, очень удобен для анимации. В настоящее время также существует множество графических библиотек JS на основе SVG, таких какsvg.js, Snap.svg, Velocity.js, D3.jsПодождите, в настоящее время нет требований к приложению SVG, и я переверну бренд, когда буду его использовать.
CSS-обработка изображений
Если специальные эффекты вашего изображения используются только для отображения пользователям и не нуждаются в сохранении, вы можете напрямую использовать CSS для их обработки.Базовое изменение размера изображения, растяжение, поворот, обрезка и другие операции напрямую включают в себя несколько свойств CSS width/height/ наклон/поворот/обрезка и т. д. можно сделать. Если вы хотите добавить специальные эффекты, вы можете использовать CSS-фильтр Duang, чтобы выйти без каких-либо базовых знаний в области графики и математики:
Подробнее см.CSS filter - MDN, Исходный код DEMO см. в JS Bin..
Суммировать
Наконец, небольшой инструментTrimPNG. каждый знаетTinyPNGPNG можно сжать,TrimPNGКак следует из названия, он убирает пробелы и белые рамки картинки, и реализует функцию автоматического вырезания изображения и обрезки изображения (логотип я скопировал прямо из TinyPNG, все панды, не важно 😝)
Используемые технические точки были упомянуты выше.Принцип кадрирования состоит в том, чтобы дважды просмотреть пиксельную матрицу в горизонтальном и вертикальном направлениях, найти крайние непрозрачные точки сверху, снизу, слева и справа, а затем определить эффективные область изображения.Алгоритм удаления белого края в настоящее время все еще относительно глуп, пока он близок к белой точке, я его убил, и я улучшу его позже.Оптимизирован алгоритм удаления белого края и принята стратегия удаления меток.Сначала просканируйте один раз, чтобы отметить подозрительные белые точки, а затем просканируйте снова.Все подозрительные белые точки, прилегающие к прозрачной области, очищаются.Конечно, этот алгоритм также относительно мертв. Профессиональные и умные, пожалуйста, дайте мне знать.
Адрес опыта:quanfeng.tech/trimpng/
Эта статья только кидает кирпичи в качестве резерва навыков в работе.Если у вас есть какие-либо дополнения, пожалуйста, оставьте сообщение и обменяйтесь :)