从C＃中的字节错误中删除0个值

Question

I have this code :

[WebMethod]
public static string SaveImg(string imgdata)
{

    string Path = "UploadedImages/";
    string folderPath = HttpContext.Current.Server.MapPath(Path);
    Guid gid=Guid.NewGuid();
    string fileNameWitPath = folderPath + "img_" +gid  + ".png";

    FileStream fs = new FileStream(fileNameWitPath, FileMode.Create);
    BinaryWriter bw = new BinaryWriter(fs);

    byte[] data = Convert.FromBase64String(imgdata);

    bw.Write(data);
    bw.Close();
    bw.Dispose();
    return  "/" + Path +"img_"+ gid + ".png";
}

witch is a function that take a base64 string and convert it to binary and save the image to server

the base64 data are taken from a canvas that load the image upon upload the image look like this :

my problem will not show unless you open the example image in a new tab, you can see that it contain white borders around it due to the fact that when it's been uploaded into the canvas it wont fit the canvas size

my question is how can i remove those white border from the image ( removing the 0 byte from the byte array ) before i save it to server ( bw.write(data) ) I tried this code but it did not work with me :

int i = data.Length - 1;
while(data[i] == 0)
   --i;
// now data[i] is the last non-zero byte
byte[] bar = new byte[i+1];
Array.Copy(data, bar, i+1);
bw.Write(data);

this is the client code :

        var canvas = $("#imageCanvas")[0];
        var ctx = canvas.getContext("2d");
        var uploadInput = $('#UploadFile');
        var width = 382;
        var height = 295;
uploadInput.on('change', function (e) {
            RemoveDisabledClass();
            handleImage(e);
        });

        function handleImage(e) {
            var reader = new FileReader();
            reader.onload = function (event) {
                var img = new Image();
                img.onload = function () {
                    // var canvas = ctx.canvas;
                    var hRatio = canvas.width / img.width;
                    var vRatio = canvas.height / img.height;
                    var ratio = Math.min(hRatio, vRatio);
                    var centerShift_x = (canvas.width - img.width * ratio) / 2;
                    var centerShift_y = (canvas.height - img.height * ratio) / 2;
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, 0, 0, img.width, img.height,
                                       centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
                }
                img.src = event.target.result;

            }
            reader.readAsDataURL(e.target.files[0]);
        }

        $("#btn_save").click(function () {
            if ($("#btn_save").hasClass("disabled")) return;
            $("#dv_Error").css("display", "none");
            var image = document.getElementById("imageCanvas").toDataURL();
            image = image.replace('data:image/png;base64,', '');
            $.ajax({
                type: 'POST',
                url: 'Default.aspx/SaveImg',
                data: '{ "imgdata" : "' + image + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (data) {
                    window.location.href = data.d;

                },
                error: function (request, status, error) {
                    $("#dv_Error").css("display", "block");

                }

            }); //ENd Ajax
        }); //End Click event

Answer 1

If you are wanting to simply remove the 0's from the byte array could you not maybe use LINQ? by importing the namespace you can then use this code to check for all 0 values in array and select the values that arent 0 and rewrite it to the array:

data = data.Where(x => x != 0).ToArray();

Hope this helps you.

Regards, Warren

Answer 2

One solution would be to use something like ImageProcessor ( https://github.com/JimBobSquarePants/ImageProcessor ) - it includes a Processor that does exactly what you're looking for:

   // Read a file and resize it.
   byte[] source = File.ReadAllBytes(file);

   using (MemoryStream inStream = new MemoryStream(source))
       using (MemoryStream outStream = new MemoryStream())
           using (ImageFactory imageFactory = new ImageFactory())
           {
               // Load, remove whitespace around image and save an image.
               imageFactory.Load(inStream)
                    .EntropyCrop()
                    .Save(outStream);

            } 
        }
    }

the EntropyCrop Processor will crop the image to the area of greatest entropy. In other words, it will remove whitespace from around the image.

There's also a url-based web api available in the ImageProcessor.Web project.

Code References:

• https://github.com/JimBobSquarePants/ImageProcessor/blob/V2/src/ImageProcessor/ImageFactory.cs#L648-L666
• https://github.com/JimBobSquarePants/ImageProcessor/blob/V2/src/ImageProcessor/Processors/EntropyCrop.cs
• https://github.com/JimBobSquarePants/ImageProcessor/wiki/ImageProcessor