Javascript 使用已使用canvas对象修改并上载到服务器的8位图像时出现颜色问题

概述：

我有一个应用程序，允许客户上传一张图片-一张照片。为了减少发送到服务器的字节数，我使用HTML5画布减小了图像的大小。照片有特定的需要和已知的大小要求，所以我在服务器上进一步调整大小，将每个图像存储到blob存储中

我遇到的问题是一个8位灰度图像，所有的白色像素都是红色的

步骤：

使用当前版本的Chrome，客户可以选择一张照片 可以上传

客户端使用一个名为的JavaScript库来调整图像大小，使其达到2048px框内70%质量的最大尺寸。返回画布对象

使用canvas.toBlob（）从画布创建blob并发送到服务器

服务器接收上传到磁盘的字节

完成后，通过Image类加载文件

图像将作为“原始”保存到blob存储器中

该映像已调整大小并作为“主”保存到blob存储中

关键点查找：

只有步骤7中服务器调整大小的映像包含此问题

在步骤6中保存的原始图像没有将其白色像素转换为红色。为了完整性，映像类将转换为MemoryStream并上载到Azure存储，调整大小的映像也是如此

如果我跳过客户端调整大小，我就不会有白色像素变为红色的问题

查看在步骤4中流式传输到磁盘的映像（通过Windows）的属性，我可以看到映像的深度为24。对原始显示器8执行相同操作。这是有道理的，因为画布对象将只与24位图像一起工作，我相信这是从屏幕上拍摄的

因此，问题似乎特定于8位图像，该图像已通过Canvas对象转换为24位，并随后在服务器上调整大小

到目前为止我所尝试的：

我已经把精力集中在服务器上了，因为在客户端似乎没有什么选择

正如您所想象的，我在服务器上调整图像大小的“初始”代码是faily直接“开箱即用”的东西

var destImage = new Bitmap(width, height);
destImage.SetResolution(image.HorizontalResolution, image.VerticalResolution);

我还尝试使用图形对象进行更多的控制。我已经使用了每个质量/模式参数-很高兴尝试更多。我也试过

graphics.Clear(Color.White);

如果我从红色画布开始，白色实际上是透明的

最后，我尝试使用2，C#图像处理库来替换我自己的服务器端调整大小代码。这些在哪里和哪里。两人的结果相同

---

欢迎提供任何帮助。

您确定它是红色的，而不仅仅是透明的，后面是红色的吗？您确定它是红色的，而不仅仅是透明的，后面是红色的吗？