Изображения и фотографии · Редактор изображений и рисунков в браузере
Растровая или векторная графика: почему рисунки на фото становятся пикселями
· Фон
редактирование изображений холст обработка браузера
Растровые изображения представляют собой сетки пикселей; векторная графика — это инструкции по рисованию фигур. В этом посте объясняется разница, почему фотография может быть только растровой и почему все, что вы на ней рисуете, наследует ту же судьбу при экспорте.
Размытый логотип и фотография, которую так и не удалось «векторизировать» — две повседневные путаницы с одним объяснением
Размытый логотип и аннотированную фотографию часто обвиняют в одной и той же проблеме, но изначально они представляют собой разные виды материала. Векторный логотип — это набор инструкций для контуров, обводок и заливок; Фотография — это конечное поле образца цвета. Редактор открывает фотографию как растровое растровое изображение размером с холст, поэтому его рабочий мир уже представляет собой сетку пикселей еще до того, как будет нарисована линия или прямоугольник.
Нарисуйте рамку над фотографией, экспортируйте ее и увеличьте масштаб. В результате получается растровое изображение, аннотации которого занимают пиксели рядом с фотографией. Сравните этот файл с исходным SVG при большем размере экрана, и разница станет видна: увеличение экспорта приводит к повторной выборке его сетки, а увеличение SVG пересчитывает его путь. Этот редактор не превращает первый объект во второй.
Растр: сетка цветных ячеек — как PNG, JPEG и WebP хранят изображения и почему при масштабировании появляются пиксели
Растровые изображения записывают цвет в определенных позициях сетки. PNG, JPEG и WebP различаются по кодировке и сжатию, но экспортированное изображение при отображении по-прежнему преобразуется в пиксели. Граница в один пиксель, сглаженная кривая и небольшая подпись — все это конечные образцы конечного изображения. Масштабирование файла вверх требует процесса интерполяции для оценки дополнительных выборок; он не восстанавливает исходную инструкцию рисования.
Это ограничение имеет значение, когда аннотация должна оставаться четкой при различных размерах. Выноска снимка экрана, предназначенная для одного фиксированного дисплея, может вполне подойти в качестве растрового экспорта, в то время как торговая марка, предназначенная для вывесок, печати и нескольких интерфейсов, обычно должна оставаться доступной в качестве векторного ресурса. Используйте редактор составного изображения, а не вместо исходного изображения, которое должно масштабироваться независимо.
Вектор: математически описанные формы — контуры, штрихи и заливки в таких форматах, как SVG, и почему они масштабируются без потерь
Векторы описывают геометрию, а не хранят каждый отображаемый пиксель. Путь SVG может указывать кривую, ширину обводки, заливку и преобразование; Затем средство рендеринга вычисляет пиксели, соответствующие текущему размеру. Вот почему одна и та же простая отметка может оставаться чистой, если ее разместить в нескольких измерениях. Объяснением является предыстория уровня формата, а не утверждение, что этот редактор генерирует или сохраняет такие инструкции.
Редактор браузера временно использует геометрическую информацию для жестов линий и фигур, что позволяет предварительному просмотру следовать за указателем перед его отпусканием. После завершения жеста результат закрашивается в растровый слой. Экспорт объединяет видимые слои и вызывает canvas.toBlob для PNG, JPEG или WebP. По этому пути нет экспортного или векторного документа SVG, поэтому геометрия не сохраняется как независимый объект.
Почему фотографии по своей природе растровые: датчики фиксируют образцы, а не формы, и никаких изменений при преобразовании, которые
Фотографии представляют собой растровый материал, поскольку камера записывает образцы света, попадающие на сенсор, и сохраняет эти образцы в виде данных изображения. Описание фотографии в векторном виде потребует интерпретации, которая заменяет ее текстуру, шум, тени и неправильные детали придуманными формами. Увеличение масштаба или экспорт по-другому может изменить сетку, но ни одна из операций не меняет тип информации, содержащейся в исходном захвате.
Это различие также объясняет, почему фотография и логотип могут сосуществовать в одном редактировании, не становясь при этом одним и тем же. Логотип может начинаться как вектор в другом месте, но после того, как он будет нарисован на растровой фотографии в этом редакторе, объединенным результатом будет пиксельная сетка. Сохраняйте исходный логотип отдельно, если его повторное использование будет иметь значение в будущем, и рассматривайте экспорт браузера как готовое изображение для его текущей цели.
Рисование на растре: что делает редактор — при редактировании аннотации могут иметь форму фигур, но экспортированное изображение представляет собой единую сетку
Во время жеста инструменты линий и фигур могут вести себя как компактные геометрические инструкции: редактор знает начальную точку, конечную точку, контур и текущий предварительный просмотр. При выпуске эти инструкции преобразуются в растровый слой. Следы кисти представляют собой растровую краску в том виде, в котором они созданы, а текст растрируется при размещении, а не сохраняется как подвижный текстовый объект. Таким образом, сеанс обеспечивает удобство, не обещая впоследствии возможности редактирования на уровне объекта.
Экспорт делает границу явной. Видимые растровые слои объединяются в одно полотно, а затем кодируются в браузере как PNG, JPEG или WebP. Повторное открытие этого файла дает вам фотографию и пометки как обычные пиксели; он не предоставляет получателю выбираемый прямоугольник, многократно используемый путь или редактируемый заголовок. Сохраните многоуровневый сеанс или исходные ресурсы, если вам может потребоваться изменить аннотацию, а не просто поделиться изображением.
Выбор подходящего типа работы — когда запрашивать векторный логотип, а когда растровый экспорт — это именно то, что вам нужно.
Выбирайте векторный ресурс, когда сам знак должен перемещаться: логотипу требуется несколько размеров, диаграмма может быть изменена или символ необходимо разместить на нескольких фонах. Выбирайте растровый экспорт, если целью является готовый к публикации снимок экрана, доказательство с выноской или фотография, содержащая видимую заметку. Правильное решение следует из следующего использования, а не из убеждения, что один формат всегда лучше.
Редактор изображений и рисунков в браузере подходит для второй категории. Он может размещать на фотографии метки кисти, линии, прямоугольника, эллипса и растровые текстовые метки, а затем экспортировать композицию в виде растрового файла. Он не может вывести SVG или сохранить векторную объектную модель. Если клиент запрашивает логотип как независимый ресурс, вернитесь к исходному векторному источнику вместо извлечения увеличенной версии из отредактированных пикселей.
Вывод: знайте, какой из них вы держите в руках — как редактор изображений и рисунков в браузере редактирует и экспортирует растровые изображения по своему замыслу.
Надежная мысленная модель проста: редактор может использовать геометрию для описания жеста, но документ и его экспорт представляют собой растровые изображения. Каждая открытая фотография и слой редактора имеют конечную сетку пикселей. Увеличение этой сетки приводит к повторной выборке существующей информации и экспорту видимых слоев в другой растр. Ни один шаг в этом рабочем процессе не создает векторный путь многократного использования из линии, которая уже стала пикселями.
Прежде чем рисовать, проверьте тип файла и предполагаемого получателя. Если получателю необходимо просмотреть одно готовое изображение, экспортируйте растр и проверьте его края в фактическом размере дисплея. Если получателю необходимо отредактировать метки, перекрасить логотип или повторно масштабировать изображение, предоставьте подходящий векторный или многослойный источник. Это различие не позволяет технически допустимому экспорту быть ошибочно принят за другой вид результата.