Using VS2022, C#, Blazor and jquery the code first loads a "C:\Images\defaultImage.png" into a canvas region in the page:
<canvas id="CanvasId" @ref="canvasElement"></canvas> await JS.InvokeVoidAsync("loadImageOnCanvas", "CanvasId", "/scripts/defaultImage.png");This image is then saved into a database. At another day, the user retrieves the image from the db and loads it in the canvas. At this point, after the image is loaded, the user needs to know if this image is still the same as the defaultImage.png, previously saved in the db, or if the defaultImage.png has been changed/replaced.
NOTE: It is a simple image in black and white and only 27KB size 241px x 154px.
To check it, I use the code below but when both are comparedthey are never equal. The one from the canvas is always a bit bigger in size, around 1k.
// Retrieve the image that was loaded on canvasvar canvasImage = await JS.InvokeAsync<string>("captureCanvasImage", "CanvasId");canvasImage = canvasImage.Replace("data:image/png;base64,", String.Empty);// byte[27980]byte[] imageOnCanvas_Bytes = Convert.FromBase64String(canvasImage);// byte[26978]byte[] defaultImage_Bytes = File.ReadAllBytes("wwwroot/scripts/defaultImage.png");// Compare as string returns FALSE var result = canvasImage == Convert.ToBase64String(defaultImage_Bytes);// Compare byte arrays returns FALSEvar result2 = imageOnCanvas_Bytes.SequenceEqual(defaultImage_Bytes);