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

Posted 2023-02-25

【中文标题】使用 C# 和 jQuery 将画布保存到图像

【英文标题】：Save canvas to image using C# and jQuery

【发布时间】：2016-02-16 16:55:44

【问题描述】：

我正在尝试将使用 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 选择中突出显示。

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

【参考方案1】：

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

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

裁剪不规则的选择

如果你真的想裁剪一个圆形或一个椭圆，你就在你的 自己的。 Jcrop 将为这些作物提供直角坐标， 并且可以进行进一步处理以提取圆或椭圆 来自图像。

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

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

或者，如果您的服务器端代码“知道”选择裁剪蒙版的形状，您可以将完整（矩形）图像发送回服务器，并让您的服务器端代码使用正确的蒙版形状就像 php 中的 GD。

【讨论】：

@lncans 你有一些 c# 例子我怎么能做到这一点？谢谢