Retrieve binary data from C# with Ajax

Question

I'm a bit new in web development and I can't achieve what I'm trying to do.

I have a Database with a table called "PI_Banners", where I store some images. This table stores an ID and a VARBINARY column that contains the binary data of the image.

What I'm trying to do, is to retrieve that data with an Ajax request to a C# function, and create a "img" tag using Data URI Scheme. Then append that new image to a div

This is what I got:

Ajax call:

$(document).ready(function() {

    var dto = {};
    var dtoJSON = JSON.stringify(dto);

    $.ajax({
        async: false,
        url: 'BannerRotativo.aspx/devuelveBanners',
        cache: false,
        dataType: 'json',
        type: "POST",
        data: dtoJSON,
        contentType: "application/json; charset=utf-8",
        success: function(data, textStatus, jqXHR) {
            responsedevuelveBanners(data);
        },
        error: errorResponse
        });
});

Being "devuelveBanners" the C# function.

C# code:

public static string devuelveBanners()
{
    DataReader DR;
    DR = listaBanners();
    //armaJson creates the Json string from the DataReader.
    string strJson = GENERAL.armaJson(DR);
    return strJson;
}


public DataReader listaBanners()
    {
        try
        {
            string strComando;
            sqlCommand SQLC;
            DataReader DR;

            strComando = "SELECT banner_img FROM PI_Banners";
            //sqlCon is the connection, and is open already.
            SQLC = new System.Data.SqlClient.SqlCommand(strComando, sqlCon);
            SQLC.CommandType = CommandType.Text;
            DR = SQLC.ExecuteReader();

            return DR;
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

When I parse the Json string back, and create the image:

function responsedevuelveBanners(data)
    {
        var datos = JSON.parse(data.d);
        $("#imgContainer").append("<img src='data:image/jpg;base64," + datos.Rows[0].Row[0].banner_img + "' />");
    }

the image is created but doesn't show up, because it has this URL:

data:image/jpg;base64,System.Byte[]

I know I'm doing something terribly wrong trying to retrieve the json data this way, but I don't know how to achieve this!

Thanks in advance!

You need to return the image data as Convert.ToBase64String(image_bytes) (i.e. a string) — Alex K.
– Alex K., Commented Dec 4, 2014 at 17:49

Dalorzo · Accepted Answer · 2014-12-04 17:49:42Z

2

In order to use <img src="data:image/PNG;base64' the base64 part is because you need to return a Base64 string instead of array of bytes therefore you need to convert your byte[] to 64Base using: Convert.ToBase64String(buffer)

So using your code as example:

ImageConverter imageConverter = new ImageConverter();
byte[] resourceByteArray = (byte[])imageConverter.ConvertTo(_YourObj.GetImage(), typeof(byte[]));

Your WebApi method should be returning:

return Convert.ToBase64String(resourceByteArray);

answered Dec 4, 2014 at 17:49

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bruno Mamani Over a year ago

What if I already have the byte array? I just skip the imageConverter step and just convert that to Base64? Thanks!!!

Dalorzo Over a year ago

Well the answer is yes you just skip to the Convert.ToBase64String(resourceByteArray); part of the answer.

Collectives™ on Stack Overflow

Retrieve binary data from C# with Ajax

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related