Visual Studio Code - How to show BASE64 stored data in SQL Server in an Image in WebForms ASP.NET - RDLC report

MAK
November 7, 2022
116 views
0 votes
2 Answers

I’ve Asset Codes which I’m converting into BASE64 like this:

private string GenerateBarcode(string BarCode)
{
    string generatebarcode = BarCode;

    GeneratedBarcode barcode = BarcodeWriter.CreateBarcode(generatebarcode, BarcodeWriterEncoding.Code128);

    barcode.ResizeTo(400, 120);
    barcode.SetMargins(10);
    barcode.ChangeBarCodeColor(Color.Black);

    Image MyBarCodeImage = barcode.Image;

    var myArray = (byte[])new ImageConverter().ConvertTo(MyBarCodeImage, typeof(byte[]));
    string temp_inBase64 = Convert.ToBase64String(myArray);

    return temp_inBase64;
}

And after this, I’m saving this BASE64 into my database.

Now, getting this into my Dataset, showing in tabular form.

At the RDLC level, I’ve tried:

Drop an Image report control from toolbox.
Right click on the image and choose image properties
Set the image source to database
Set the MIME type to a suitable value, for example image/bmp.
Set use this field to the image value which you have,

For example =Fields!Code.Value. The parameter type should be Text.

But it’s not showing anything in the RDLC Report Viewer.

I’ve found many solutions on the internet but none of them seems works to me. Is there something that I missed?

I use Visual Studio 2019 Community, .NET Framework 4.7.2, Microsoft.ReportViewer.WebForms 15.0.0.0

Thanks.

Tags: asp.net c#rdlc

Answers

- liwuen
- November 7, 2022 at 6:33 am
- 0 votes
0
If you are using webforms, you can use the asp Image control
```
<asp:Image ID="ImageObject" runat="server" Width="400"/>
```
And from server side do something like this
```
public void SetImageData(byte[] inArray)
    {
        string strBase64Logo = Convert.ToBase64String(inArray);
        if (!string.IsNullOrWhiteSpace(strBase64Logo))
        {
            ImageObject.Visible = true;
            ImageObject.ImageUrl = "data:Image/png;base64," + strBase64Logo;
        }
        else
        {
            ImageObject.Visible = false;
        }
            
    }
```
Save (and load) your image info as byte[] and let the control know that you will use an image from Base64 as data:Image/png;base64.

Just a heads-up: if you are storing your images as base64 in database, it will grow a lot really fast, and there will be network overhead when retrieving multiple images from database and when sending them to the page. I had a project with exactly this scenario and we found out that it was slow to load multiple images at the same time, as the queries returned a lot of data just from the images.
Login or Signup to reply.

- AlbertDKallal
- November 7, 2022 at 6:41 am
- 0 votes
0
I suggest that you consider storing the data in the table as raw binary, and then convert to base64 as required.

the bonus points is that the RDLC can and will accpet a raw binay data source for a image.

So, example with raw binary, gridview, and RDLC report example.

So, say I have this gridView, and I need to display that binary picture:
```
<asp:GridView ID="GridView1" 
    runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
    CssClass="table" Width="50%" OnRowDataBound="GridView1_RowDataBound"
    >
    <Columns>
        <asp:BoundField DataField="Fighter" HeaderText="Fighter"        />
        <asp:BoundField DataField="Engine"  HeaderText="Engine"         />
        <asp:BoundField DataField="Thrust"  HeaderText="Thrust (lbs)"   />
        <asp:BoundField DataField="FirstFlight" HeaderText="First Flight"
            DataFormatString ="{0:MM dd yyyy}"  ItemStyle-Width="100"    />
        <asp:BoundField DataField="Description" HeaderText="Description"    />
        <asp:TemplateField ControlStyle-Width="132">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server"/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
```
And my code to load – along with the "binary" convert in the row data bound event.
```
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();
    }

    void LoadGrid()
    {
        string strSQL =
            @"SELECT ID, Fighter,Engine, Thrust, FirstFlight, Description, MyImage
            FROM Fighters ORDER BY Thrust";

        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                conn.Open();
                DataTable rstData = new DataTable();
                rstData.Load(cmdSQL.ExecuteReader());
                GridView1.DataSource = rstData;
                GridView1.DataBind();
            }
        }
    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            DataRowView gData = e.Row.DataItem as DataRowView;
            Image MyImage = e.Row.FindControl("Image1") as Image;

            MyImage.ImageUrl =
                @"data:image/jpeg;base64," + Convert.ToBase64String((byte[])gData["MyImage"]);
        }
    }
```
And now I see/get this:

So, in above, I CONVERT on the fly the raw binary data in the SQL table to base64 string.

And creating a RDLC report, this also works

Then I can indeed bind the image control directly to the image column, and the column and it works

eg:

and then when I run this, I get this:

however, if you stroring the picture as a base64 string?

You only need to "exclude" the first of the string with the mine type, and only include everything after the "," in the base64 string should work.

eg this:
=Convert.FromBase64String(CStr(Parameters!Base64.Value).Substring(22))

You have to change the 22 based on the type of image.

So, in my case, I’m using/testing with a jpeg.

thus this:
```
 data:image/jpeg;base64,/
```
So, my expression to chop all off up to the "," is thus this:

So this works for me:
```
=Convert.FromBase64String(CStr(Fields!MyImage2.Value).Substring(23))
```
So, you CAN use a base64 string. It just that you are NOT to include the first part (mine type info) in that string.

If you don’t want to change this in the report viewer, then I suppose you could add/make/have/create a expression in the sql to only return all characters after 23 chars.
Login or Signup to reply.