Преобразуйте изображение в оттенки серого и уменьшите его разрешение с помощью Javascript - PullRequest
Новая
       13

Преобразуйте изображение в оттенки серого и уменьшите его разрешение с помощью Javascript

0 голосов
/ 23 июня 2018

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

<form action="/submitphoto" method="post">
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="photo" onchange="this.form.submit()" />
</form>

Это работает. Но очень часто (особенно в настоящее время с телефонными камерами с высоким мегапикселем):

  • файл изображения будет очень большим (таким образом, долгое время загрузки!) И слишком высоким излишним разрешением для моего приложения, например, 4000x6000 пикселей

  • изображение будет цветным, тогда как мне нужна только оттенки серого

Конечно, я мог бы сделать уменьшение размера JPG (например, 4000x6000 пикселей до 800x1200 пикселей) + color => обработка в оттенках серого на сервере, но тогда слишком большое время загрузки / время обработки сервера / пропускная способность будут потрачены впустую .

Вопрос: как уменьшить разрешение изображения JPG, сделанного с помощью <input type="file" capture="camera" ...>, и преобразовать его в оттенки серого до отправки form в Javascript?

1 Ответ

0 голосов
/ 13 августа 2018

В приведенном ниже примере я использую MarvinJ , чтобы изменить размер и преобразовать изображение в оттенки серого перед загрузкой на сервер. Эти две операции выполняются в JavaScript на стороне клиента следующим образом: 

 Marvin.scale(image.clone(), image, 200);
 Marvin.grayScale(image.clone(), image);

Я также включил реализацию кнопки загрузки и метода для отправки изображения на сервер.

Вы можете попробовать фрагмент. Я надеюсь, что это поможет вам. 

/***********************************************
 * GLOBAL VARS
 **********************************************/
var image = new MarvinImage();

/***********************************************
 * FILE CHOOSER AND UPLOAD
 **********************************************/
 $('#fileUpload').change(function (event) {
	form = new FormData();
	form.append('name', event.target.files[0].name);
	
	reader = new FileReader();
	reader.readAsDataURL(event.target.files[0]);
	
	reader.onload = function(){
		image.load(reader.result, imageLoaded);
	};
});

function resizeAndSendToServer(){
  $("#divServerResponse").html("uploading...");
	$.ajax({
		method: 'POST',
		url: 'https://www.marvinj.org/backoffice/imageUpload.php',
		data: form,
		enctype: 'multipart/form-data',
		contentType: false,
		processData: false,

		success: function (resp) {
       $("#divServerResponse").html("SERVER RESPONSE (NEW IMAGE):<br/><img src='"+resp+"' style='max-width:400px'></img>");
		},
		error: function (data) {
			console.log("error:"+error);
			console.log(data);
		},
		
	});
};
/***********************************************
 * IMAGE MANIPULATION
 **********************************************/
function imageLoaded(){
  Marvin.scale(image.clone(), image, 200);
  Marvin.grayScale(image.clone(), image);
  form.append("blob", image.toBlob());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<form id="form" action='/backoffice/imageUpload.php' style='margin:auto;' method='post' enctype='multipart/form-data'>
				<input type='file' id='fileUpload' class='upload' name='userfile'/>
</form><br/>
<button type="button" onclick="resizeAndSendToServer()">Resize and Send to Server</button><br/><br/>
<div id="divServerResponse">
</div>
...