Отправка HTML и CSS координат и значений с помощью jQuery при отправке пользователем

Question

Отправка HTML и CSS координат и значений с помощью jQuery при отправке пользователем

0

Я работаю над веб-приложением, где пользователи перетаскивают текст на изображении. В идеале, я хотел бы, чтобы мои приложения могли сохранять их изображение с наложенным текстом. Для этого я планирую использовать PIL (Python Imaging Library) для воссоздания изображения в бэкэнд.

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

Можно ли все это записать с помощью jQuery или JavaScript?

В этом скрипте JS, http://jsfiddle.net/booyaa/YvJhE/ текст перетаскивается. Скажем, пользователь перемещает текст по изображению. Чтобы воссоздать изображение (с текстом, который пользователь перетащил), мне понадобится координаты того, куда был перетащен текст. Возможно ли XY-координаты для элемента HTML с jQuery?

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
<img src="http://imgur.com/JS1HXFw.jpg">

$( "#draggable" ).draggable();

$("#capture").click(
    function(event) {
        var photoCoords = $("img").position();
    })

Я получаю undefined для var photoCoords в консоли. любая идея почему?

metersk 18 фев. 2014, в 03:15

Источник

1

Не могли бы вы предоставить пример кода или даже jsfiddle? Довольно сложно угадать, что вам нужно сделать в вашей конкретной ситуации с таким небольшим количеством информации.
marionebl 18 фев. 2014, в 01:44
0

обновляется с помощью jsfiddle
metersk 18 фев. 2014, в 02:04
0

Вам нужно заключить селектор в кавычки, например, "img"
Indy 18 фев. 2014, в 02:28
0

Аааа .... хм. Спасибо
metersk 18 фев. 2014, в 02:29
0

теперь я получаю неопределенный, когда я набираю var photoCoords в консоли
metersk 18 фев. 2014, в 02:30

Показать ещё 3 комментария

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Не могли бы вы предоставить пример кода или даже jsfiddle? Довольно сложно угадать, что вам нужно сделать в вашей конкретной ситуации с таким небольшим количеством информации.
Вам нужно заключить селектор в кавычки, например, "img"
теперь я получаю неопределенный, когда я набираю var photoCoords в консоли

marionebl · Accepted Answer · 2014-02-17T23-29-00.000Z

Вы можете использовать

 $(selector).offset();

или

 $(selector).position();

для получения координат элемента. В то время как offset дает вам координаты относительно элемента, position дает вам координаты относительно родительского элемента смещения элемента.

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

В вашем случае использования, как я понял, вы, вероятно, захотите получить как #draggable и offset изображения и передать его на сервер. Сравнивая координаты обоих элементов (top и left), вы можете легко определить их положение относительно друг друга и иметь все, чтобы создать скомпонованное изображение.

отредактировал вышеупомянутое с новым вопросом на селекторе
Не могли бы вы опубликовать новый вопрос как актуальный новый вопрос? В любом случае: вы, вероятно, захотите установить идентификатор (<img id = "foo" src = "..." />) для вашего изображения и выбрать его следующим образом: $('#foo') . $('img') выдаст вам все изображения в DOM, а $(img) попытается разрешить переменную img которая просто не определена.