使用 C# 和 jQuery 将 canvas 保存到图像

Question

我正在尝试将使用 jcrop 突出显示的部分图像正确保存为圆形图像。

我有 canvas 元素可以预览所选区域以及图像的外观，请查看下面的屏幕截图：

我还有隐藏字段，用于保存 canvas 中显示的值（例如："data:image/png;base64"）。

我可以使用以下代码从隐藏字段值中保存图像：

if (hfImageData.Value != string.Empty)
            {
                string value = hfImageData.Value;
                if (value.Contains("jpeg"))
                {
                    value = value.Replace("data:image/jpeg;base64,", "");
                }
                else if(value.Contains("png"))
                {
                    value = value.Replace("data:image/png;base64,", "");
                }
                string path = Server.MapPath("/cropimages/");
                string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";

                using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
                {
                    using (BinaryWriter bw = new BinaryWriter(fs))
                    {
                        byte[] data = Convert.FromBase64String(value);
                        bw.Write(data);
                        bw.Close();
                    }
                }
            }

这是该代码的最终结果：

我真正想要保存的是圆形格式的图像，因为它在 jcrop 选择中用 jQuery/C# 突出显示。

我需要在现有代码中修改什么才能使图像裁剪按预期工作？

Answer 1

在一般情况下，计算机图像总是存储为矩形数据块。 "non-rectangular" 图像是具有非矩形蒙版或与之关联的不透明度 "alpha" 图层的矩形图像。

根据 jcrop online docs，jcrop 不进行非矩形裁剪-

Cropping Irregular Selections

If you actually want to crop a circle or an ellipse, you're on your own. Jcrop will provide the rectangular coordinates for these crops, and further processing can be done to extract the circle or ellipse from the image.

如果您打算在客户端进行图像处理，那么您需要使用支持 Alpha 通道的图像格式（可能是 32 位：8 位用于 RGB 和 Alpha）。您需要将遮罩应用于 canvas 元素中的 alpha 通道。我认为 alpha 支持是 HTML5 中相当新的东西，所以浏览器支持可能是不完整的。

然后您需要以支持 alpha 的文件格式将其传回主机。 JPEG 没有，PNG（每像素 32 位格式）有。

或者，如果您的服务器端代码 "knows" 选择裁剪蒙版的形状，您可以将完整（矩形）图像发送回服务器并让您的服务器端代码应用正确的蒙版形状，使用 PHP.

中的 GD 之类的东西

使用 C# 和 jQuery 将 canvas 保存到图像

Save canvas to image using C# and jQuery

javascript

c#

asp.net

jquery

jcrop