Как загрузить скриншот страницы на сервер?

Question

[Millerish]

Доброе время суток!

Мне нужно сделать скрин части страницы и загрузить его на сервер без перезагрузки страницы.

Я нашел библиотеку html2canvas.js. Оно решат мой вопрос, делая base64 строку и передавая ее в php:

$(document).ready(function () {
		$('#btnCapture').on("click", function () {
			captureAndUpload();
		});
		function captureAndUpload() {
			$('body').html2canvas({
				onrendered: function (canvas) {
					var i = canvas.toDataURL("image/png");
					$.ajax({
						url: "http://artultra/save.php?img=" + i ,
						type:"post",
						async: false,
						proccessData: false,
						success: function(response){
							alert('ok')
						},
						error:function(xhr, ajaxOptions, thrownError){
							alert(xhr.responseText);
						}
					});

				}
			});
		}
	});

$data = $_REQUEST['img'];
list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);
file_put_contents('image.png', $data);

При отправке картинки формируется очень длинный url (более 2000 символов). И выливает про это ошибка 414 (Request-URI Too Large).

Как можно можно решить этот вопрос нет откручивая гайки apache? Есть какая альтернатива?

Comments

[OVK2015]

через FormData() передавайте

Answer 1

[Алексей Яковлев]

попробуйте передать содержимое в параметре "data" запроса:

$.ajax({
	url: "http://artultra/save.php",
	type:"post",
	async: false,
	data: i,
	proccessData: false,
	success: function(response){
	  alert('ok')
	},
	error:function(xhr, ajaxOptions, thrownError){
	  alert(xhr.responseText);
	}
});

Comments

[Millerish]

что-то не так, картинка 0 кб выходит

[Millerish]

приходит пустая строка

[Yakov Vylegzhanin]

Millerish: потому что передаваемую переменную нужно обозвать.

$.ajax({
  url: "http://artultra/save.php",
  type:"post",
  async: false,
  data: { screen : i },
  proccessData: false,
  success: function(response){
    alert('ok')
  },
  error:function(xhr, ajaxOptions, thrownError){
    alert(xhr.responseText);
  }
});