JQuery / как загрузить картинку "drag'n drop"-ом
Собственно как загрузить картинку "drag'n drop"-ом на специальное поле на сайте, без использовании сервера, и выводить его на другом поле?
(задание такое что надо загрузить фотку человека и придавать ему "смешное лицо", Например: надеть шляпу, очки, бороду и т.д. , НО надо php использовать нельзя) html: <div class="picture"></div> css: .picture{ background: url("Ссылка"); } делаю так: jquery: drop[0].ondrop = function(event) { event.preventDefault(); drop.removeClass('hover'); drop.addClass('ondrop'); var file = event.dataTransfer.files[0]; if (file.size > maxSize) { drop.text('Файл слишком большой!'); drop.addClass('error'); return false; }else if(file.type != "image/jpeg"){ alert("only jpeg or jpg !!!"); drop.removeClass("ondrop"); }else{ drop.text("Файл добавлен!").removeClass("ondrop").addClass("dropped").delay(700).queue(function(){ drop.removeClass("dropped").html("Drop your face file here <br/><span style='color:red;'>Only JPG file. Maximum 300 Kb.</span>"); }); $("#imageFace").css({ "background":"НЕМОГУ ВЗЯТЬ АБСОЛЮТНЫЙ ПУТЬ", }); } }; |
Цитата:
|
Цитата:
|
aslan2030, а в конце всех манипуляций что?
|
Цитата:
|
aslan2030, откуда фотка человека загружается и где находится сама страница?
|
Цитата:
|
Не понятно зачем драпы и дропы и JQuery, да пускай хоть все изображения загружает и вертит как хочет одного CSS достаточно посмотри мою ИГРУ С КАРТИНКАМИ.
http://clecar.ru/risovalki/css/kartinkia.html |
Вложений: 1
вот сайт) надо вместо лица Брэда Питта загрузить другое лицо перетаскиванием
|
Посмотрел и проблем вроде как нет. Просто доделать надо. А я конечно эту задачу решал бы другим способом не связываясь с JQuery
|
aslan2030, jQuery здесь не поможет, нужно использовать Canvas API, и таскать прямо на него посредством Drag and Drop API и аксессуары и фото, затем приводить их к виду Data URI (для CORS) посредством File API, затем посредством интерактивной библиотеки для Canvas типа Fabric.js загружать, манипулировать, выгружать Canvas. По всем API есть много примеров в гугле.
|
Цитата:
|
Уже возможно не актуально, но может кому пригодится, недавно сделал. Программа весьма проста ни драров ни джери. Страницу можно сохранить работать будет и без интернета. Но лицо поменять, без проблем.
http://clecar.ru/risovalki/kuvalda/kyvalda.html |
Часовой пояс GMT +3, время: 07:26. |