Как «синхронизировать» предпросмотр и результат наложения текста?
Здравствуйте, уважаемые программисты. Ситуация такая. Накидал предпросмотр для пользователей наложения текста на изображение
Но... Есть проблема. При предпросмотре изображение адаптируется под ширину экрана. И может быть, к примеру, вместо оригинального 1280 пикселей, всего 200 или 300. Естественно когда пользователь выбирает шрифт, то на предпросмотре он видит одну "картину", а когда php накладывает текст на оригинал, то естественно выглядит текст совсем иначе. Например, очень мелко! Как в моей ситуации можно "синхронизировать" просмотр, чтобы совпадало с реальным результатом? Как-то высчитывать оригинальный размер, размер изображения на экране и адаптировать шрифт при помощи js?
можно вставить картинку тегом img без указания размеров, тогда его размеры будут равны размеру картинки которые можно получить через js, а масштабировать картинку можно transform:scale(.5)
Сложно понять что это даст. Картинка будет масштабироваться вместе с текстом? каким образом? Его как и картинку тоже надо будет масштабировать через transform:scale(.5)?
tyoma_koder, Я блоку с position relative присвоил id transform. Потом, при загрузке страницы, как я понимаю, нужно сделать что-то типа этого? $('#transform').css('transform',scale(.5));
Только значение надо как-то высчитывать?
Александр, а что должно получиться в итоге? Чтобы картинка была 100% ширины экрана? Если да то делишь ширину экрана на ширину картинки, это и будет твой scale
tyoma_koder, Нет. Посмотрите мой исходный код на fiddle, там видно что есть два инлайн блока. В одном настройки, в другом соответственно картинка. Результат, что при достаточном размере экрана эти блоки рядом друг с другом, а если недостаточно, то блок с настройками вверху, а с картинкой опускается по д него. В любом случае, блок с картинкой адаптируется под свободное пространство своего родителя, но в идеале чтобы был не больше 700 пикселей в ширину.
Александр, если 100% блока с превью то то же самое только делишь ширину блока с превью на ширину картинки, максимальную/минимальную ширину тоже можно через JS проверять
Может, подумать в направлении авто-масштабирования текста: чтобы тот вписывался в области, принимая максимально возможный размер шрифта?
Какая бы ни была картинка, можно из неё выделить по высоте, скажем, 1/4 сверху и 1/4 снизу – это прямоугольники, которые заполняются текстом. Размер шрифта вычислять относительно, скажем, той же высоты изображения.
