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

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

---

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

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

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

你可以试试这个片段。我希望它能帮助你

/***********************************************
*全局变量
**********************************************/
var image=新的MarvinImage（）；
/***********************************************
*文件选择器和上载
**********************************************/
$（'#fileUpload'）。更改（函数（事件）{
form=新FormData（）；
form.append（'name'，event.target.files[0].name）；
reader=newfilereader（）；
reader.readAsDataURL（event.target.files[0]）；
reader.onload=函数（）{
image.load（reader.result，imageload）；
};
});
函数resizeAndSendToServer（）{
$（“#divServerResponse”）.html（“上传…”）；
$.ajax({
方法：“POST”，
网址：'https://www.marvinj.org/backoffice/imageUpload.php',
数据：表格，
enctype:“多部分/表单数据”，
contentType:false，
processData:false，
成功：功能（resp）{
$（“#divServerResponse”）.html（“服务器响应（新图像）：
”；
},
错误：函数（数据）{
日志（“错误：+错误”）；
控制台日志（数据）；
},
});
};
/***********************************************
*图像处理
**********************************************/
函数imageLoaded（）{
比例（image.clone（），image，200）；
灰度（image.clone（），image）；
append（“blob”，image.toBlob（））；
}

调整大小并发送到服务器