为什么我的图像没有显示? CSHTML

时间:2017-08-29 08:35:24

标签: c# html asp.net-mvc

我正在尝试显示图片而我不明白我的错误在哪里。我检查了有关该主题的问题,但没有结果。

我在imageBuffer类型对象中有一个图像: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"); } } } 。我确信在此之前一切正常,以下代码正在运行。

imageBuffer

(PS:我的byte[400 * lengthList * lengthList * 4]对象在创建Bitmap之前没有维度(我的意思是,它不是2D数组):更确切地说是convertbase64()

由于// 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); 无法找出没有指示的尺寸,我尝试了这个:

dashboard

@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> 来自我的Model类(我的项目是一个MVC项目)。

My View文件最终如下所示:

//<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>

我得到了结果:fail

为什么不运作?

这是html输出

$rootScope.data = [{...}]
$rootScope.SelectedId = 0;

enter image description here

enter image description here

图片如下:enter image description here

1 个答案:

答案 0 :(得分:1)

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

    // …

您将原始字节存储在内存流中。您的图像查看工具恰好显示文件是偶然的,因为大多数图像查看器都是(大部分)忽略文件扩展名并尝试渲染适合它们的任何内容。

您需要将图片实际转换为PNG文件,以便从中获取实际的PNG字节:

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

    // …

一旦你这样做,字节将是正确的PNG数据,所以它也应该在浏览器中正确呈现,并且磁盘上的文件应该变得更小,因为它不再是原始的位图数据。