Why is my image not displaying ? cshtml

Question

I'm trying to display an image and I don't understand where my error is. I checked questions on the topic, but without result.

I've got an image in a byte[] type object : imageBuffer . I'm sure the everything is ok till here, the following code is functioning.

unsafe
{
    fixed (byte* ptr = imageBuffer)
    {
        using (Bitmap image = new Bitmap(20 * lengthList, 20 * lengthList, 20 * lengthList * 4,
                   PixelFormat.Format32bppRgb, new IntPtr(ptr)))
        {
            image.Save(@"C:\Users\FS091843\Desktop\ Stations\Station1\greyscale.png");
        }          
    }
}

(PS : my imageBuffer object has before the Bitmap creation no dimensions (I mean, it is no 2D array) : it is more precisely a byte[400 * lengthList * lengthList * 4] )

As the convertbase64() can't figure out the dimensions without indications, I tried this :

// Some stuff before
DashboardPageModel dashboard = new DashboardPageModel();
unsafe
{
    fixed (byte* ptr = imageBuffer)
    {
        using (Bitmap image = new Bitmap(20 * lengthList, 20 * lengthList, 20 * lengthList * 4,
           PixelFormat.Format32bppRgb, new IntPtr(ptr)))
        {
            using (MemoryStream m = new MemoryStream())
            {
                image.Save(m, image.RawFormat);
                byte[] imageBytes = m.ToArray();
                image.Save(@"C:\Users\FS091843\Desktop\Stations\Station1\greyscale.png");

                dashboard.image = imageBytes;
                // Convert byte[] to Base64 String

            }

        }
    }
}
return View(MVC.Views.Common.Dashboard.DashboardIndex, dashboard);

Where dashboard comes from my Model class (my project is an MVC project).

My View file finally looks like :

@model Serene7.Common.DashboardPageModel
@{
    ViewData["Title"] = "Dashboard";
    ViewData["PageId"] = "Dashboard";
}

@section Head {
<link rel="stylesheet" href="~/Content/iCheck/flat/blue.css">
<link rel="stylesheet" href="~/Scripts/morris/morris.css">
<link rel="stylesheet" href="~/Scripts/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="~/Scripts/datepicker/datepicker3.css">
<link rel="stylesheet" href="~/Scripts/daterangepicker/daterangepicker-bs3.css">
<link rel="stylesheet" href="~/Scripts/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="~/Scripts/raphael/raphael-min.js"></script>
<script src="~/Scripts/morris/morris.min.js"></script>
<script src="~/Scripts/sparkline/jquery.sparkline.min.js"></script>
<script src="~/Scripts/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="~/Scripts/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="~/Scripts/knob/jquery.knob.js"></script>
<script src="~/Scripts/daterangepicker/moment.min.js"></script>
<script src="~/Scripts/daterangepicker/daterangepicker.js"></script>
<script src="~/Scripts/datepicker/bootstrap-datepicker.js"></script>
<script src="~/Scripts/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="~/Scripts/adminlte/pages/dashboard.js"></script>
<script src="~/Scripts/adminlte/demo.js"></script>
}

@section ContentHeader {
    <h1>@LocalText.Get("Navigation.Dashboard")<small>@Html.Raw(Texts.Site.Dashboard.ContentDescription)</small></h1>
}

<!-- Small boxes (Stat box) -->
<div class="row">...</div><!-- /.row -->
    <!-- Main row -->
<img src="data:image/png;base64,@(Convert.ToBase64String(Model.image))" alt="Red dot"/><!-- not really a red dot, had no idea what to enter as description -->
<div class="row">...</div>

and I get as a result :

Why isn't it functioning ?

Here is the html output

//<head>...</head>
<body id="s-LoginPage" class="no-navigation">
<script id="Template_Membership_LoginPanel" type="text/template">
<div class="flex-layout">
    <div class="logo"></div>
    <h3>Welcome to SERENE (Serenity Application Template)</h3>
    <form id="~_Form" action="">
        <div class="s-Form">
            <div class="fieldset ui-widget ui-widget-content ui-corner-all">
                <div id="~_PropertyGrid"></div>
                <div class="clear"></div>
            </div>
            <div class="buttons">
                <button id="~_LoginButton" type="submit" class="btn btn-primary">
                    Sign In
                </button>
            </div>
            <div class="actions">
                <a href="/Account/ForgotPassword"><i class="fa fa-angle-right"></i>&nbsp;Forgot password?</a>
                <a href="/Account/SignUp"><i class="fa fa-angle-right"></i>&nbsp;Register a new account</a>
                <div class="clear"></div>
            </div>
        </div>
    </form>
</div>
</script>



<div class="page-content">
    <div id="LoginPanel">

    </div>
</div>

<script type="text/javascript">
jQuery(function() {
    new Serene7.Membership.LoginPanel($('#LoginPanel')).init();
});
</script>
</body>
</html>

The image looks like :

Answer 1

// …
using (MemoryStream m = new MemoryStream()) 
{
    image.Save(m, image.RawFormat);
    byte[] imageBytes = m.ToArray();

    // …

You are storing raw bytes in the memory stream. It is just by chance that your image viewing tool displays the file properly because most image viewers are built to (mostly) ignore file extensions and try to render whatever is appropriate for them.

You need to actually convert your image into a PNG file in order to get the actual PNG bytes out of it:

// …
using (MemoryStream m = new MemoryStream()) 
{
    image.Save(m, ImageFormat.Png); // convert to PNG
    byte[] imageBytes = m.ToArray();

    // …

Once you did that, the bytes will be proper PNG data, so it should also render in the browser properly, and the file on your disk should become a lot smaller since it's no longer raw bitmap data.

Why is my image not displaying ? cshtml

Question

1 answers

solution1
1 ACCPTED 2017-08-29 10:42:40

Why is my image not displaying ? cshtml

Question

1 answers

solution1 1 ACCPTED 2017-08-29 10:42:40

solution1
1 ACCPTED 2017-08-29 10:42:40