Как отправить фото после js обрезки на сервер?

Question

[kirillcits]

Ребят такое дело
использую скрипт обрезки фото:
он после обрезки помещает результат в img с id result
использую форму отправки изображений на сервер.
беда в том что он грузит исходное фото то есть не обрезанное!
берет фото из инпута а должен брать обрезанное

если менять id там и там то все равно не пашет
подскажите пожалуйста как сделать

более подробно с видео можете тут глянуть

https://vk.com/wall-49821894_540307

Я просто уже запутался
прошу очень сильно
Я просто новичок

как то можноже заменить фото в инпут на новое обрезанное?
если в инпуте менять id то нельзя тк инпут берет фото для обрезки

Comments

[zkrvndm]

При помощи Canvas сформируйте Blob и уже его отправляйте на сервер в составе FormData.

[kirillcits]

Надим Закиров, а можете написать илли ссылку кинуть пожалуйста. я буквально зашиваюсь уже сдавать надо - мой первый проект. весь день просидел результат нет. просто замылился уже

[zkrvndm]

kirillcits, ссылки:
https://learn.javascript.ru/blob#izobrazhenie-v-blob
https://learn.javascript.ru/formdata#metody-obekta...
https://learn.javascript.ru/formdata#otpravka-form...

[Anton]

ты бы код показал было бы лучше и быстрее...

[kirillcits]

Надим Закиров, убил кучу времени - не получилось

[zkrvndm]

kirillcits, что именно не получилось?

[kirillcits]

Надим Закиров, загрузить результат на сервер. даже код верно написать. увы js не понимаю

[zkrvndm]

kirillcits, ну так учите JavaScript, я же дал вам ссылки на материалы. Пример отправки:

function send_image() {

	// берём любое изображение
	var img = document.querySelector('img#result');

	// создаём <canvas> того же размера
	var canvas = document.createElement('canvas');
	canvas.width = img.clientWidth;
	canvas.height = img.clientHeight;

	var context = canvas.getContext('2d');

	// копируем изображение в  canvas (метод позволяет вырезать часть изображения)
	context.drawImage(img, 0, 0);
	// мы можем вращать изображение при помощи context.rotate() и делать множество других преобразований

	// toBlob является асинхронной операцией, для которой callback-функция вызывается при завершении
	canvas.toBlob(function(blob) {
	  
		var formData = new FormData(); // Создайем форму
		formData.append('image', blob, 'result.png'); // Добавляем в форму наш Blob
		
		// Отправляем форму с блобом (картинкой) на сервер:

		var url = 'https://qna.habr.com'; // Укаазываем адрес куда отправить
		
		var xhr = new XMLHttpRequest(); xhr.open('POST', url);
		
		// Обработчики ответа:
		
		xhr.onreadystatechange = function() {
			if (xhr.readyState === XMLHttpRequest.DONE) {
				if (xhr.status === 200) {
					alert(xhr.responseText); // В случае успеха, выводим ответ сервера
				}
				else {
					alert('При отправке формы произошла ошбика, детали смотрите в консоли.');
					console.log('При отправке формы произошла ошбика, ниже объект с деталями ошибки:');
					console.dir(xhr);
				}
			}
		}
		
		xhr.send(formData); // Цепляем форму и шлём
	  
	}, 'image/png');

}

[kirillcits]

Надим Закиров, емае,всю ночь просидел. не получилось и опять сижу

[zkrvndm]

kirillcits, я дал вам готовый код, что вам еще надо?

[kirillcits]

Надим Закиров, сработал алерт 1 раз что ошибка. в консоли быстро исчезает такая ошибка

[zkrvndm]

kirillcits, код ниже должен возвращать отсылаемую картинку:
document.querySelector('img#result');
Важный момент, картинка должна быть загружена С ТОГО ЖЕ домена, что и сайт. Иначе правила безопасности не дадут вам сформировать Blob.

[kirillcits]

Надим Закиров, ошибку выдал и все. я засунул фото к папку с доменом - 0. а почему так? а как пользователям грузить фото

[zkrvndm]

kirillcits, короче идите ка вы на фрилансим, я за бесплатно ваши ребусы разгадывать точно не буду. Лично у меня все нормально работает, что там вы накрутили со своей стороны я знать не знаю.