如何使用 Javascript 将图像质量转换为黑白答案

【问题标题】：How to convert image quality to black & white using Javascript如何使用 Javascript 将图像质量转换为黑白
【发布时间】：2020-07-18 08:39:24
【问题描述】：

我正在处理图像，我希望当有人上传图像时，图像应该转换为黑白图像。我的以下代码正在为我执行此操作，但是当我右键单击图像并下载它时，它会将图像下载为彩色图像。看起来我的代码只显示黑白图像而不转换它的质量。他们有什么方法可以为用户提供转换后的黑白图像吗？

JsFiddle：https://jsfiddle.net/4kcyqbz5/

代码：

<html>
<body>
<form>
<p><label for="file" style="cursor: pointer;"><b>Upload Image</b></label></p>
<p><input type="file" accept="image/*" name="image" id="file"  onchange="loadFile(event)"></p>

<p><img style="-webkit-filter: grayscale(100%); filter: grayscale(100%);" id="output" width="200" /></p><br>

</form>

<script>
var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>

【问题讨论】：

您并没有改变实际图像的颜色，您只是在图像上添加一种样式，当然下载时它会是彩色图像。有人已经问过同样的问题； stackoverflow.com/questions/28301340/…

标签： javascript html css

【解决方案1】：

由于 Cem 已经清理完毕，您不会更改任何图像数据。您只是在使用 css 通过过滤器更改图像的样式。

我在下面的片段中准备了“简单”的逻辑。您可能会看到操作图像可能需要使用画布进行一些准备工作。您可以在此处找到有关图像处理的更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas。

编辑：您还可以从画布下载经过修改的图像。

let loadFile = function(event) {
    
  let image = document.getElementById("img");
  image.src = URL.createObjectURL(event.target.files[0]);  
};

document.getElementById("img").onload = (event => {
  let canvas = document.createElement("canvas");
  let context = canvas.getContext("2d");
  canvas.width = event.target.width;
  canvas.height = event.target.height;
  document.getElementById("output").appendChild(canvas);
  context.drawImage(event.target, 0, 0);
  let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  let data = imageData.data;
  for (var i = 0; i < data.length; i += 4) {
      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i]     = avg; // red
      data[i + 1] = avg; // green
      data[i + 2] = avg; // blue
    }
    context.putImageData(imageData, 0, 0);
});

<form>
<p><label for="file" style="cursor: pointer;"><b>Upload Image</b></label></p>
<p><input type="file" accept="image/*" name="image" id="file"  onchange="loadFile(event)"></p>

Changes Img in Canvas:
<div id="output"> </div>
Actual image:<br>
<img id="img" />

</form>

【讨论】：