Сложная математическая задача при изменении размеров изображений

Question

У меня есть изображение, которое я хочу пометить водяными знаками в правой нижней части других изображений. Размеры изображения водяного знака: 179 ширина, 39 высота.

А что если у меня есть другое изображение, размеры которого 150, 20, высота? Если бы мы попытались сделать водяные знаки с помощью исходного изображения, оно, очевидно, было бы слишком большим, а само изображение было бы полностью замаскировано изображением водяного знака, верно?

Так, как я могу определить меньшую ширину и высоту, к которой я буду изменять размеры изображения водяного знака, что-то намного меньше, чем 150 ширины, 20 высот, чтобы оно отображалось неподвижно в виде водяного знака и не маскировало изображение полностью?

Answer 1

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

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

Масштабирование до 50% ширины будет означать, что водяной знак будет иметь размер 75 x 16 пикселей, что слишком высоко (на основе произвольно выбранного процента).

(75/179) * 39 = 16

Масштабирование до 25% высоты будет означать водяной знак 22 x 5.

(5/39) * 150 = 19

Если размеры в конечном итоге превышают исходный водяной знак, решать вам, масштабировать водяной знак или нет up . Качество изображения ухудшается гораздо быстрее при увеличении размера изображения по сравнению с уменьшением его размера на тот же коэффициент.

Answer 2

Прежде всего, я рекомендую вам создать набор изображений водяных знаков различных размеров вместо изменения размера "на лету".

Ниже я изложил рабочий процесс динамической маркировки изображений на веб-сайте:

Дизайн хорошего водяного знака

Прежде всего, попробуйте создать водяной знак с прозрачным фоном. Это значительно снизит риск прикрытия важных частей целевого изображения. Это может быть сделано с использованием gif или (предпочтительно) формата png imagefile. Просто убедитесь, что прозрачный водяной знак хорошо работает как на светлом, так и на темном фоне.

Также примите во внимание, как наилучшим образом проектировать водяной знак, который подходит как для портретных, так и для ландшафтных изображений и изображений с неуклюжими пропорциями. Вы должны рассмотреть возможность сделать две версии - одну для широких изображений и одну для высоких изображений. Для последнего типа вы можете повернуть водяной знак на 90 градусов или, если водяной знак состоит из текста, вы можете разделить текст на две или более строки.

Предварительный рендеринг водяного знака нескольких разных размеров

Так что не изменяйте размер водяного знака динамически, вместо этого я рекомендую вам визуализировать набор изображений водяных знаков с различными размерами. Это нужно сделать только один раз, и это значительно улучшит четкость и / или разборчивость водяного знака (особенно для небольших целевых изображений).

В зависимости от того, насколько разными будут изображения на веб-странице, вам может потребоваться большее или меньшее количество размеров. Это выбор дизайна, который вам придется сделать, но я думаю, что вы могли бы обойтись только с двумя или тремя различными размерами.

Применить водяной знак

Это будет происходить динамически на стороне сервера (в вашем php-файле). Сначала выясните размеры целевого изображения с помощью функции getimagesize. Имея эту информацию под рукой, вы должны решить, какую версию водяного знака использовать, основываясь на размере, соотношении сторон и ориентации. Например.

if ( $width > $height ) {$useLandscapeWatermark=true;}
if ( $width > 100 && $width < 400 ) {$watermarkSize=2;}

и т.д.

Наконец, чтобы применить водяной знак, я рекомендую вам взглянуть на библиотеку gd . Это мощная библиотека, которая может выполнять множество аккуратных операций, в том числе объединяя два изображения. Альтернативой является ImageMagic.

Удачи!

Answer 3

Я бы, вероятно, масштабировал водяной знак до 20% от изображения с водяным знаком, или 179x39, в зависимости от того, что меньше.