Всем привет. Итак стоит следующая задача. На сайте есть картинка на которую в определенном месте наносится текст и все это выгружается пользователю в виде картинки. Для лучшего понимания картинка - это шаблон диплома (ну типа грамота красивая), а надпись это имя и фамилия Картинки могут быть разные, в том числе разных размеров и разной ориентации (альбомная или книжная) Как реализовывается для эксплуатации. Контент менеджер загружает на сайт картинку и указывает в каком месте будет устанавливаться надпись (для разных картинок это могут быть разные места). Пользователь если он выпонил условия диплома получает картинку с его именем и фамилией. Как это реализуется программно. Грузим картинку в полном размере на сервер, выдаем эту картинку на страницу на которой происходит указывание координат вывода текста. Делается это посредством такого не хитрого скрипта Код (Javascript): <!doctype html> <html lang="en"> <head> <style type="text/css"> #el{ position:relative; width: 100%; /* z-index: 2*/ /*background:#555*/ } .stamp{ width:200px; height:40px; background:#ddd; position: absolute; opacity:0.9; /*z-index: 2*/ } .stamp2{ width:200px; height:40px; background:#ddd; position: absolute; opacity:0.6; /*z-index: 2*/ } .description{ width:100%; height: 100px; border:2px; } </style> </head> <body> <div class="description"><form method="POST" action=""> <form action="" method="POST"> Выберите цвет надписи и укажите место на дипломе где будет располагаться позывной и имя соискателя <select name="color"><option>Черный</option><option>Белый</option></select> <input type='hidden' id="X"> <input type='hidden' id="Y"> <button type="submit"> Указал </button> </form> </div> <img id="el" src='1.png'> <script type="text/javascript"> var el = document.getElementById('el'); el.addEventListener('click', getClickXY, false); el.addEventListener('mousemove', moveClickXY, false); //mouseup function getClickXY(event) { var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1; var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1; document.getElementById('stmove').style.zindex=-1; document.getElementById('X').value = clickX+12; document.getElementById('Y').value = clickY; divkoordinateY=clickY+108; document.getElementById('st').style.top = divkoordinateY+'px'; document.getElementById('st').style.left = clickX+12+'px'; alert('Координаты обозначены. Выберите цвет и нажмите "Указал""' ); } function moveClickXY(event) { //document.getElementById('st').style.top = divkoordinateY+'px'; var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1; var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1; divkoordinateY=clickY+108; document.getElementById('st').style.zindex =-1; document.getElementById('stmove').style.top = divkoordinateY+'px'; document.getElementById('stmove').style.left = clickX+12+'px'; } </script> <div class="stamp" id="st"><center>AA1BB<br />Name Sirname</center></div> <div class="stamp2" id="stmove"><center>AA1BB<br />Name Sirname</center></div> </body> </html> Тут дам небольшое пояснение - в верхней части страницы выводится блок с фиксированной высотой в 100 пикселей, эти +100 пискелей(точнее 108 - 8 пискелей, что бы оторвать указатель мышки от слоя, что б удобнее таскался слой) прибавляются к координатам слоя который используется для визуализации. Сам клик по изображению дает точные координаты относительно верхнего левого угла изображения(позиционирование клика относительно изображения, а позиционирование слоя для визуализации - абсолютное) - эти точные координаты передаются в поля формы, которая и отправляется на сервер. Таким образом получаем координаты начала вывода строки - эти координаты поступают в скрипт и записываются в базу. Далее При запросе пользователем, если он получает диплом, на загруженную картинку в сохраненных координатах начинает выводится текст с помощью библиотеки GD, с помощью imagettftext. Но проблема в том, что эти координаты по факту не совпадают - получаются значительно ниже того места где они указывались. Никто не сталкивался с подобным? Или где ошибка. Буду очень благодарен за ответ.
Разобрался с вопросом - причина оказалась в том, что по тегу <img width=100%> - размер привязывается к окну, а не 100% от размера картинки. Поэтому пошел простым путеем - в крипте сначала определяю истинный размер изображения с помощью функции GD imagesize, если не ошибаюсь, и во вьюху выталкиваю не только путь, но и размеры картинки. добавляя эти аттрибуты к тегу img - таким образом не зависисмо от браузера и разрешения - получаем истинные размеры и далее вышеуказанными скриптами определяем координаты и передаем их в базу. Все работает. Теперь осталось дописать, что бы пользователь на этапе установки координат еще и выбирал размер шрифта. Ибо если диплом большой - мелкий шрифт смотрится ущербно и наоборот, если маленький диплом то крупный шрифт - выглядит нелепо.