使用C＃和jQuery将画布保存到图像

Question

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

我有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();
                    }
                }
            }

这是该代码的最终结果：

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

我需要在现有代码中进行哪些修改才能使图像裁剪正常工作？

Answer 1

通常，计算机图像始终存储为矩形数据块。 “非矩形”图像是具有与之关联的非矩形蒙版或不透明度“ alpha”层的矩形图像。

根据jcrop在线文档 ，jcrop不会进行非矩形裁剪-

裁剪不规则选择

如果您实际上想裁剪圆形或椭圆形，那么您就该靠自己了。 Jcrop将为这些作物提供直角坐标，并且可以进行进一步处理以从图像中提取圆形或椭圆形。

如果要在客户端上进行图像处理，则需要使用支持alpha通道（可能为32位：RGB和Alpha为8位）的图像格式。 您需要将遮罩应用于canvas元素中的alpha通道。 我认为alpha支持是HTML5中的最新内容，因此浏览器支持可能不完整。

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

另外，如果您的服务器端代码“知道”所选裁剪蒙版的形状，则可以将完整的（矩形）图像发送回服务器，并让您的服务器端代码使用正确的蒙版形状，例如使用GD PHP。