Question

我有以下代码，允许用户拍摄照片，然后将其上传到服务器（最终将进行进一步的图像处理）。

<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 =>服务器上的灰度处理，但是上载时间/服务器处理时间/带宽过高会被浪费。

问题：在Java中提交<input type="file" capture="camera" ...>之前，如何降低用form拍摄的JPG图像的分辨率并将其转换为灰度？

Answer 1

在下面的示例中，我使用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>

使用Javascript将图像转换为灰度并降低其分辨率

1 个答案: