Save canvas to image using C# and jQuery

Question

I'm trying to correctly save part of image which is highlighted with jcrop to a circle image.

I have canvas element which previews the selected area and how the image will look like, please check the screenshot below:

I also have hidden field which saves the value (example: "data:image/png;base64") which is displayed in the canvas.

I'm able to save image from the hidden field value with this code:

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

This is the end result of that code:

What I really want to save is image in circle format as it is highlighted in the jcrop selection with jQuery/C#.

What do I need to modify in the existing code to make the image crop work as expected?

Answer 1

In general computer images are always stored as rectangular blocks of data. A "non-rectangular" images is a rectangular image with a non-rectangular mask or opacity "alpha" layer associated with it.

Per the jcrop online docs, jcrop doesn't do non-rectangular cropping-

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.

If you're aiming to do the image manipulation on the client, then you would need to be working in an image format that supports an alpha channel (probably 32 bit: 8 bits for RGB and Alpha). You would need to apply the mask to the alpha channel in a canvas element. I think alpha support is fairly recent stuff in HTML5 so browser support is probably patchy.

You would then need to communicate that back to the host in a file format that supports alpha. JPEG doesn't, PNG (in 32 bit per pixel format) does.

Alternatively, if your server-side code "knows" the shape of the selection crop mask, you can ship the full (rectangular) image back to the server and have your server-side code apply the correct mask shape, using something like GD in PHP.