CODEWITHSUNDEEP
c#csssql-server
Omer Aviv
Omer Aviv

Reputation: 284

Load image in background-image (saved in MSSQL - varbinary)

I'm saving images into the table using this code:

if (FileUploadControl.PostedFile.ContentType.StartsWith("image/", StringComparison.OrdinalIgnoreCase))
{
    byte[] imagedata = MSImage.ConvertToByte(FileUploadControl);
    if (imagedata != null)
    {
        string param = "@Image";
        SqlParameter sp = spc.Add(new SqlParameter(param, SqlDbType.VarBinary, -1));
        sp.Value = imagedata;
        sql += ", " + Q.C(Database.MSImage) + "=" + param + ", " + Q.C(Database.MSImageType) + "=N'" + FileUploadControl.PostedFile.ContentType + "'";
    }
}

And attempting to load it into background-image style with this code:

string imagedata = MSImage.ConvertToImage((byte[])ms[Database.MSImage]);
if (imagedata != null && ms[Database.MSImageType] != DBNull.Value && ((string)ms[Database.MSImageType]).StartsWith("image/", StringComparison.OrdinalIgnoreCase))
{
    takzir2.InnerHtml = "<div class='msbgimage' style=\"background-image:url(data:" + (string)ms[Database.MSImageType] + ";base64, " + imagedata + ")\"></div>";
}

The problem is that it won't load the image, and when I try inspecting the element, it gets really stuck because the converted byte array returned a very long string (that sums up in about 650k characters).

This is my MSImage class:

public class MSImage
{
    public static byte[] ConvertToByte(FileUpload hpf)
    {
        try
        {
            if (hpf.HasFile)
            {
                Stream fs = hpf.PostedFile.InputStream;
                BinaryReader br = new BinaryReader(fs);
                Byte[] bytes = br.ReadBytes((Int32)fs.Length);
                return bytes;
            }
        }
        catch { }
        return null;
    }

    public static string ConvertToImage(byte[] imagedata)
    {
        try
        {
            if (imagedata != null && imagedata.Length > 0)
                return Convert.ToBase64String(imagedata);
        }
        catch { }
        return null;
    }
}

Am I saving the image in a wrong way or is it the loading that causes the issue?

EDIT:

I just found out that this code is the problem:

takzir2.InnerHtml = "<div class='msbgimage' style=\"background-image:url(data:" + (string)ms[Database.MSImageType] + ";base64, " + imagedata + ")\"></div>";

I tried using a div that has runat="server" and it worked with div.Style["background-image"], but how can I make it work with InnerHtml?

Upvotes: 0

Views: 381

Answers (2)

Omer Aviv
Omer Aviv

Reputation: 284

I just found the solution (It's a silly one though):

This line of code was causing the problem:

takzir2.InnerHtml = "<div class='msbgimage' style=\"background-image:url(data:" + (string)ms[Database.MSImageType] + ";base64, " + imagedata + ")\"></div>";

I changed the end of it from:

";base64, " + imagedata + ")\"></div>";

To:

";base64," + imagedata + ")\"></div>";

The space between ";base64," to imagedata was causing it because InnerHtml didn't replace the space character with %20.

Upvotes: 0

cramopy
cramopy

Reputation: 3497

I'm using following Code to convert my Images, maybe you find a difference...

static string Image2Base64(Image image)
{
    using (MemoryStream ms = new MemoryStream())
    {
        image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
        byte[] imageBytes = ms.ToArray();
        string base64String = Convert.ToBase64String(imageBytes);
        return base64String;
    }
}

static Bitmap Base642Image(string base64image)
{
    try
    {
        byte[] imageBytes = Convert.FromBase64String(base64image);
        MemoryStream ms = new MemoryStream(imageBytes, 0, imageBytes.Length);
        ms.Write(imageBytes, 0, imageBytes.Length);
        Bitmap image = (Bitmap)Image.FromStream(ms, true);
        return image;
    }
    catch { return null; }
}

I hope this might help you...

Upvotes: 1

Related Questions