Программирование, т. 6

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

По типу, как вконтакте при загрузке аватара?

да, именно. Вообще конечно можно в вк зайти и посмотреть, но на работе чет не охото.

P.S. Хотя до меня вроде доходит. Т.е. надо нарисовать квадрат поверх изображения и добавить ему возможность перетаскивания и изменения размеров, а потом просто из канваса вырезать изображение с шириной и высотой этого квадрата.

Много способов, в зависимости от того, что тебе нужно конкретно.

У меня, например, просто <img> и <div> поверх, который выступает областью обрезки. Js ресайзит этот <div> и передает координаты четырех крайних точек (по отношению к левому верхнему углу картинки) на сервер. php режет, добавляет новую картинку куда нужно и возвращает ссылку.

По сути тоже самое, что вконтакте.

В гугле, к слову, для этого можно найти много готовых решений на jQuery.

На фронтэнде не надо резать.

Да и вообще гугли jcrop и аналоги по запросу image crop

гайз, как заставить элемент генериться непосредственно под указателем?

Вот так не работает, генерится сверху

$("#but").click(function() {

$("h1").append('<div><img class="dynamic-pictures" id="pic' + (++counter) + '" src=""></div>');

$("#pic" + counter).css("top", $("#but").css("top"));

$("#pic" + counter).css("left", $("#but").css("left"));

});

Чет какая-то дикая ебала. Нарисуй елемент, а потом скрывай его 'display: none' или показывай 'display: block'. Но даже если тебе надо постоянно добавлять элементы, то... то мне влом рассуждать без кода, давай ссылку или пили пример на кодепене.

гайз, как заставить элемент генериться непосредственно под указателем?

Вот так не работает, генерится сверху

 

$("#but").click(function() {

$("h1").append('<div><img class="dynamic-pictures" id="pic' + (++counter) + '" src=""></div>');

$("#pic" + counter).css("top", $("#but").css("top"));

$("#pic" + counter).css("left", $("#but").css("left"));

});

$("#but").on('click',function() { - так лучше ,чем просто .click(function()

А по твоему вопросу

$("h1").after('<div><img class="dynamic-pictures" id="pic' + (++counter) + '" src=""></div>');

пробовал after, не помогает

помогает 100%

http://codepen.io/Fessnik/pen/EKRGRJ

Поменял p на div - http://codepen.io/felix0808/pen/yOEGEq . По стандарту вложенных абзацев быть не может, ну и аппенд походу и не умеет с ними работать.

в ваших кроты вниз уезжают

зачем добавлять div, если картинка тоже обернута в див

summon suez

Тебе что нужно то?? Ты спросил как поместить элемент ,после указаного ,after делает именно так.

Лол что

думаю он говорит о том что страница больше становится когда новые элементы добавляешь в существующее пространство

Я думаю он имел ввиду что-то типа этого http://codepen.io/felix0808/pen/aNKXzb . Типа можно таскать эту надпись создания кротов и кроты будут под ней появляться. Но на самом деле хрен его знает, сам то он писать не умеет.

феликс, спасибо, поставил пятюню в профайл.

Не очень объяснил, но именно оно и надо было,

Мне понадобилось минуты две, чтобы понять, что на кнопку можно нажать и появится крот, лол.

А то открыл все три codepen, потаскал кнопку и по экрану, и не мог въехать в чем разница

+100