Масштабирование и перемещение изображения с уменьшенным размером с помощью обрезки - это мой метод звука?

Question

Я надеюсь, что этот вопрос в порядке переполнения стека.

Я пишу какой-то код и только на этом этапе разработал алгоритм alogrithim и задавался вопросом, собираюсь ли я сделать это наилучшим образом или нет?

Вот что мне нужно сделать:

Возьмите изображение 2000x2000 пикселей и использовать существующие JS/Jquery культуры/масштаб библиотеку (не остановились на какой-либо конкретной один еще - предложения приветствуются) и позволяет пользователь передвиньте это изображение и увеличьте масштаб, чтобы он соответствовал области 1000x1000. Эта «обрезанная/увеличенная» область 1000x1000 будет конечным выходным изображением для пользователя.

ОДНАКО, в самом пользовательском интерфейсе, в целях подбора его в определенном пространстве, мне нужно, чтобы пользователь работал в половинном размере. Таким образом, их область 1000x1000 «окончательное изображение» представлена ​​площадью 500x500 пикселей. Надеюсь, это имеет смысл.

Вот это алго я придумал:

Оригинал 2000px х 2000px изображение source.png

1. Возьмите source.png и используя ImageMagick или аналогичные изменить его размер на 50% в PHP и кормах это новое «временное» изображение 1000x1000 возвращается к моему коду через Ajax.
2. Используйте обрезчик/масштабирующее устройство, чтобы отобразить это временное изображение за рабочей площадью 500x500 и разрешить пользователю обрезать/перемещать.
3. Когда пользователь закончил, отправьте координаты обрезки/масштабирования из кода масштабирования в процедуру PHP, которая обрушивает исходный исходный файл.png на новое 1000px x 1000px изображение с помощью ImageMagick, умножая X, Y, H, W на 2 и деление Масштаба (шкалы) на 2.

Я думаю, что это сработает и задумается, думает ли кто-нибудь, что это лучший способ сделать это, или я пропускаю что-то совершенно очевидное.

правку из-за расплывчатости ВЫШЕ:

В основном вот что я творю: App выводит 1000x1000px изображение с выбранного пользователем текста на нем (не говоря уже о том, что, чтобы не усложнять). Когда изображение 2000x2000 приходит, это то, что пользователь может выбирать из нескольких изображений, это будет фоновое изображение за текстом. Пользователь может перемещать и масштабировать это фоновое изображение, чтобы бит, который они хотят показывать в качестве фона в финальном выходе 1000x1000. Но рабочая область составляет всего 500х500.

Answer 1

Ваш подход полностью применим. Фактически, я бы выбрал ваш подход по сравнению с альтернативой. Я объясню ...

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

предложил Ваш подход считается «бэкенд изменение размера» реализации, в том смысле, что вы упустили ImageMagick принять некоторые интерфейсные входы с помощью AJAX (положение изображения, масштаб, независимо Просто некоторые цифры действительно..) - но затем сделать изменения размера/хранения на «бэкэнда»

вы могли бы сделать «внешнего интерфейса изменение размера», в котором вы позволяете операции JavaScript взять изображение, масштабировать его вниз, вновь выразить, что в двоичном виде, а затем нажмите его онлайн. Вам понадобится необработанный двоичный файл с измененным размером/обрезанным изображением, потому что измененная версия физически не существует в любом месте на диске (так что вы не можете выполнять типичную операцию «POST»), если пользователь сначала не сохранит изображение и не изменит его, загружает его (что не идеально)

Но я бы выступал за изменение размера бэкэнда ... почему? Безопасность. Он гораздо менее подвержен инъекции переднего конца. Злоумышленник может загружать изображение для обрезки/изменения размера, а затем использовать JS-инъекцию для вставки нового изображения по своему выбору (из-за недобросовестного намерения. Думайте наготы и т. Д.), А затем отправляйте его обратно на свой сервер. Или, что еще хуже, очень умный пользователь может кодировать вредоносный скрипт внутри вашего изображения, а затем выполнять его, как только он будет загружен на ваш сервер.

Еще одно соображение - Консистенция; вы становитесь менее зависимыми от того, что JS ведет себя последовательно (или даже вообще, в зависимости от некоторых браузеров), когда вы позволяете «центральной точке» обрабатывать изменение размера, как реализация бэкэнд.

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

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

Как насчет использования ImageMagick? Конечно, нет «идеального» инструмента, или вы его используете. Тем не менее, вам нужно определить, лучший ли инструмент для вашего проекта. Некоторые соображения ...

• Масштаб: будем честными, мы не используем ImageMagick в полной мере здесь. Это простая операция изменения размера, поэтому мы можем использовать библиотеку «dumber» для . Теперь мы используем гигантскую двоичную библиотеку для использования 1% ее функций, которые я считаю пустой тратой пространства на сервере.
• Развертывание: Представьте себе, что в один прекрасный день вам понадобится перенести на другого хостинг-провайдера. Если этот провайдер «не поддерживает» ImageMagick, вы обнаружите, что переписываете код таким образом, чтобы позволил вашему сайту продолжить работу.
• Доступность: используйте ImageMagick, если вы знаете, что он будет доступен на производственных серверах . Это отличная библиотека и очень проста в использовании, особенно с реализацией PHP. Библиотеки PHP GD, которые , скорее всего, будут развернуты на сервере PHP по умолчанию, и все требуется, чтобы получить те, которые идут, это базовая математика (см. Мой предыдущий ответ , за исключением того, что вам понадобится реализация PHP)

Все, что было сказано, исходя из ваших вероятных соображений, я бы предпочел просто использовать некоторые простые функции GD PHP (в сочетании с подходом «backend resize»).

Другой альтернативой является использование библиотеки кодов, которая больше ориентирована на выполнение изменений света на изображении. Одна отличная библиотека, которую я нашел для этого, - TimThumb. Это всего лишь скрытый PHP-файл на вашем сервере - вы даете ему несколько параметров GET (URL-адрес исходного изображения, размер адресата, режим изменения размера, некоторые фильтры, выравнивание ... что угодно), а загруженный результат будет запрошенным изображением. Он поддерживает запросы кэширования, так что он может легко вернуть ранее называемый преобразование, если вы часто выполняете те же самые изменения.

Однако TimThumb appears to lack support for distinctly positioning an image, что ставит ее обратно в царство «не является хорошим решением» - так придерживаться некоторых рукописных функций GD PHP будет работать нормально (для удручающе longwinded программирования номенклатуры, которая является имена функций GD за исключением, )

Надеюсь, это поможет! обратитесь к моему предыдущему ответу за помощью по операциям изменения размера бэкэнда и т. д.

Answer 2

Во-первых, устраните неоднозначность вашего «прикладного пространства» из вашего «пользовательского пространства».

Как вы отметили, изображение (любого заданного размера) должно вписываться в область 1000x1000. Это будет ваше прикладное пространство, пространство, к которому относится приложение.

После этого браузер без разбора изменяет размер приложения на 50% ... но на самом деле это будет окончательное преобразование, которое вы примените к дисплею, прежде чем показывать его пользователю. Это «пространство пользователя», пространство, в котором находится пользователь.

Все, что вам сказали, вам действительно нужно иметь дело с тем, чтобы ваше изображение 2000x2000 масштабировалось до заданного пространства приложений (1000x1000). После того, как вы применили все эти переводы, ТОГДА вы применяете последний 50% -ный масштаб вниз.

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

Предполагаю, что на данном этапе приложения вы будете использовать javascript, но его также можно легко применить к php.

Вам необходимо знать размер источника (2000x2000) и размер адресата (1000x1000). Все, что требуется, - это немного математика. Я предполагаю, что это то, что вы хотите, потому что я понял, что это очень распространенный шаблон программирования для «подгонки» одной вещи внутри другой вещи в пропорциональном масштабе. Я чувствую, что каждый программист в конце концов узнает эту формулу ...

var source = {w: 2000, h: 2000}; 
var dest = {w: 1000, h: 1000}; 

// here's the magic... how many times each source "fits" in the dest along each dimension 
var sourceFits = { 
    w: dest.w/source.w 
    h: dest.h/source.h 
}; 

// In this case, the source can fit x2 along each of the destination dimensions. 
// that means that sourceFits.w = 0.5 and sourceFits.h = 0.5. It's a perfect fit 
// for either dimension. It doesn't make for a compelling example, but it will work for 
// ANY provided source or dest size. 

// So, now that we know how snugly each of the source dimensions fit in the destination, 
// we can choose that as the most appropriate scale... lets pick the smaller of the two. 
var smallerFits = sourceFits.w > sourceFits.h ? sourceFits.h : sourceFits.w; 

// To make the image 'fit inside' we just scale it down by the smaller dimension... 
var newSourceSize = {w: source.w * smallerFits, h: source.h * smallerFits} 

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