Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Altering indexed bitmap's byte array breaks image display

$
0
0

I'm loading a .PNG file with a 1-bit color depth (so, indexed), converting it to a byte array, JSON-serializing it, and sending it as a response to a call to a web API by a Blazor web assembly app, which then makes the byte array the (converted) source of an img in the .razor file. In experimenting with JavaScript to change the colors of the image post-reception, I found that the RGB values of the image's two colors were 2,2,2 and 154,154,154.

So imagine my thrill when I found six consecutive bytes early in the byte array with values 2,2,2,154,154,154 right about where the DIB and other specs say the palette colors should be! But when, before setting the byte array as the image source, I attempted to change these bytes to different values to make two new colors, it displayed with the "broken image" icon. Relevant code follows.

From the web API app: loading the file into the byte array:

    var response = new ImageAndStuff { OtherInfo = "something useful" };    response.TheImage = ImageToByteArray(System.Drawing.Image.FromFile(@"ImagePath\ImageFile.png"));...    public byte[] ImageToByteArray(System.Drawing.Image imageIn) {      using (var ms = new MemoryStream()) {        imageIn.Save(ms, imageIn.RawFormat);        return ms.ToArray();      }    }

The above-mentioned serialization wrapper:

  [DataContract]  public class ImageAndStuff {    [DataMember]    public byte[]? TheImage { get; set; }    [DataMember]    public string? OtherInfo { get; set; }  }

Requesting, receiving and using the response from the .razor file:

@inject HttpClient Http;<img id="imgBig" src="data:image;base64, @System.Convert.ToBase64String(BigImage)" style="position:absolute" />@code {  byte[]? BigImage;  protected override async Task OnInitializedAsync() {    var response = await Http.GetFromJsonAsync<ImageAndStuff>("https://localhost:7065/getimg");    // Blue for dark    response.TheImage[57] = (byte)0;    response.TheImage[58] = (byte)0;    response.TheImage[59] = (byte)255;    // Yellow for light    response.TheImage[60] = (byte)255;    response.TheImage[61] = (byte)255;    response.TheImage[62] = (byte)0;    BigImage = response.TheImage;    StateHasChanged();  }}

I know I can't use System.Drawing.Graphics on indexed bitmaps, and I can't use Bitmap in Blazor. Is there some other way I must edit the byte array if I want these palette values to change? More explicit encoding, perhaps? I'm also OK changing it in the API (which also fails when manipulated like this), but I was hoping to keep that burden client-side. Thanks in advance...

EDIT: I tried using a hex editor to change the six palette color bytes directly in the file, and the loaded image looked correct. BUT--closer examination of the byte array revealed that the four bytes after them were different values! I'm thinking there's something in the way System.Drawing.Image.FromFile decodes the image file that, given the loaded palette color bytes, needs to stay in place for the bytes array-to-image conversion, and my codeside mods disrupt this, hence the display error. More revealed as further research progresses...


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>