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

【问题标题】：Convert image to grayscale and reduce its resolution with Javascript将图像转换为灰度并使用 Javascript 降低其分辨率
【发布时间】：2018-12-02 17:39:29
【问题描述】：

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

<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 像素）+颜色=>服务器上的灰度处理，但是 太高的上传时间/服务器处理时间/带宽将被浪费 em>。

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

【问题讨论】：

标签： javascript image image-processing jpeg

【解决方案1】：

在下面的示例中，我使用MarvinJ 调整图像大小并将其转换为灰度，然后再上传到服务器。这两个操作在客户端的javascript中执行如下：

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

我还包括了一个上传按钮的实现和一个将图像发布到服务器的方法。

你可以试试sn-p。希望对你有帮助。

/***********************************************
 * 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>

【讨论】：