এএসপি.নেট এমভিসি: মডেল থেকে কীভাবে বাইট অ্যারে চিত্র প্রদর্শন করবেন

Question

আমি বাইট অ্যারে চিত্র ফাইল সহ একটি মডেল করেছি যা আমি পৃষ্ঠায় প্রদর্শন করতে চাই।

ডেটাবেসে ফিরে না গিয়ে কীভাবে আমি এটি করতে পারি?

আমি যে সমস্ত সমাধান দেখি ActionResultসেগুলি চিত্রটি পুনরুদ্ধার করতে ডাটাবেসে ফিরে যেতে ব্যবহার করে তবে ইতিমধ্যে আমার কাছে চিত্রটিতে মডেলটি রয়েছে ...

Comments

দয়া করে "ASP.NET MVC" কে কেবল "এমভিসি" হিসাবে উল্লেখ করা বন্ধ করুন। একটি কাঠামো, অন্যটি ভাষা-স্বাধীন নকশার ধরণ design এটি আইই - "ইন্টারনেট" কল করার মতো

— তেরেখো

এমভিসি মডেল থেকে বাইট অ্যারে চিত্রটি কীভাবে নালাগুলি প্রদর্শন করবে?

— চ্যাথজ

Answer 1

এরকম কিছু কাজ করতে পারে ...

@{
    var base64 = Convert.ToBase64String(Model.ByteArray);
    var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
}

<img src="@imgSrc" />

নীচের মন্তব্যে উল্লিখিত হিসাবে, দয়া করে উপরের জ্ঞান দিয়ে সশস্ত্র ব্যবহার করুন যে এটি আপনার প্রশ্নের উত্তর দিতে পারে যদিও এটি আপনার সমস্যার সমাধান করতে পারে না । আপনার সমস্যার উপর নির্ভর করে এটি সমাধান হতে পারে তবে আমি দুবার ডাটাবেস অ্যাক্সেস করতে সম্পূর্ণ অস্বীকার করব না।

Comments

এটি লক্ষ করা উচিত যে এটি চিত্রটি এইচটিএমএলে এম্বেড করবে এবং বেশ কয়েকটি স্ট্যান্ডার্ড ইমেজ ক্যাশে করার কৌশল অবরুদ্ধ করবে।

— কুইন্টিন রবিনসন

@ কুইন্টিনরোবিনসন যদিও অনুরোধের সংখ্যা হ্রাস করুন:)

— dav_i

@ ডেভ_আই প্রাথমিক অনুরোধের সংখ্যা হ্রাস করুন । ওয়েব পারফরম্যান্সকে অনুকূলকরণ করার সময় সার্ভারগুলির মেকানিক্স, মধ্যস্থতাকারী সামগ্রী প্ল্যাটফর্ম এবং ক্লায়েন্টগুলি যা তথ্যের জন্য অনুরোধ করছে এবং প্রক্রিয়া করছে তাদের বোঝা অবিশ্বাস্যভাবে গুরুত্বপূর্ণ। আমি কোনও মন্তব্যে অসাধারণ বিবরণে যেতে চাই না তবে আমি এই জাতীয় প্রযুক্তি ব্যবহারের প্রকৃতপক্ষে সত্যিকারের বোঝার প্রয়োজনের উপর জোর দিতে চাই।

— কুইন্টিন রবিনসন

প্রশ্নের উত্তরটি সঠিক হতে পারে তবে আমি মনে করি যে আমরা যে সমস্যাটি সমাধান করার চেষ্টা করছি তার একটি ত্রুটি রয়েছে। যদি সমস্যাটি যদি হাতের কাছে থেকে ডাটা পেতে ডাটাবেসটিতে দুটি কলকে প্রতিরোধ করে এবং তারপরে ছবিটি পাওয়ার জন্য একটি দ্বিতীয় হয় তবে আমি মনে করি যে এর থেকে আরও ভাল সমাধান হ'ল একটি হ্যান্ডলার বাছাই করা ব্যবহার করা উচিত যা সার্ভারের সামগ্রিক বোঝা হ্রাস করতে ক্যাশে প্রয়োগ করতে পারে। যখন আপনি কীভাবে আপনার অ্যাপ্লিকেশনটি দম বন্ধ করছে তা বোঝার চেষ্টা করছেন কারণ আপনি পৃষ্ঠার প্রতিক্রিয়া স্ট্রিমে বেস 6464 এনকোডিং ব্যবহার করে একটি বিশাল ফাইল ডাম্প করার চেষ্টা করছেন আপনি যদি চাইবেন যে আপনি বড় ছবিটির বিষয়ে আরও চিন্তা করেছিলেন।

— নিক বার্ক

দুর্দান্ত, আমি এটির পুনরায় ব্যবহার করার জন্য আমার মডেলটিতে একটি পদ্ধতি যুক্ত করেছি: পাবলিক স্ট্রিং গেটবেস (৪ () 64 বেস বেস vert = কনভার্ট o টোবেস St স্ট্রিং (কন্টেন্ট আইমেজ); স্ট্রিং.ফরমেট ("ডেটা: চিত্র / gif; বেস64, {0}", বেস 64); }

— রডরিগো লঙ্গো

Answer 2

এটি আমার পক্ষে কাজ করেছে

<img src="data:image;base64,@System.Convert.ToBase64String(Model.CategoryPicture.Content)" width="80" height="80"/>     

Comments

এই একজন আমার জন্যও কাজ করেছেন, দয়া করে বলুন মডেল থেকে বাইট অ্যারে চিত্রটি কীভাবে প্রদর্শন করা যায় যখন এটি নাল হয়?

— চ্যাথজ

হাই চ্যাথজ, আমি আপনাকে দৃশ্যে যাওয়ার আগে নিয়ন্ত্রকের মডেলটি বৈধ করার পরামর্শ দিচ্ছি। যদি মডেলটি শূন্য হয়, একটি ডিফল্ট ছবিটি পাস করুন

— নোলোমোকগোসি

Answer 3

আমি এই লাইন বরাবর কিছু সুপারিশ, এমনকি আপনার মডেল ভিতরে চিত্র বাস করে।

আমি বুঝতে পেরেছি যে আপনি সরাসরি দর্শন থেকে এটি অ্যাক্সেসের জন্য সরাসরি উপায়ের জন্য জিজ্ঞাসা করছেন এবং অনেকেই এর উত্তর দিয়েছেন এবং সেই পদ্ধতির মধ্যে কী ভুল তা আপনাকে জানিয়েছিলেন তাই এটি কেবলমাত্র অন্য একটি উপায় যা আপনার এবং আমার জন্য অ্যাসিঙ্ক ফ্যাশনে চিত্রটি লোড করবে I ভাবা একটি ভাল পদ্ধতির।

নমুনা মডেল:

[Bind(Exclude = "ID")]
public class Item
{
    [Key]
    [ScaffoldColumn(false)]
    public int ID { get; set; }

    public String Name { get; set; }

    public byte[] InternalImage { get; set; } //Stored as byte array in the database.
}

নিয়ামক মধ্যে নমুনা পদ্ধতি:

public async Task<ActionResult> RenderImage(int id)
{
    Item item = await db.Items.FindAsync(id);

    byte[] photoBack = item.InternalImage;

    return File(photoBack, "image/png");
}

দৃশ্য

@model YourNameSpace.Models.Item

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
<h4>Item</h4>
<hr />
<dl class="dl-horizontal">
    <img src="@Url.Action("RenderImage", new { id = Model.ID})" />
</dl>
<dl class="dl-horizontal">
    <dt>
        @Html.DisplayNameFor(model => model.Name)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Name)
    </dd>
</dl>
</div>

Comments

"রিটার্ন ফাইল (...)" কী? স্ট্যাটিক ক্লাস ফাইল না?

— বেন সেওয়ার্ডস

এটা একটা FileContentResult অবজেক্ট হতে হবে ( msdn.microsoft.com/en-us/library/... )

— লুই Bacaj

Answer 4

একটি উপায় হ'ল এটি একটি নতুন সি # ক্লাস বা এইচটিএমএল এক্সটেনশন ক্লাসে যুক্ত করা

public static class HtmlExtensions
{
    public static MvcHtmlString Image(this HtmlHelper html, byte[] image)
    {
        var img = String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(image));
        return new MvcHtmlString("<img src='" + img + "' />");
    }
}

তাহলে আপনি যে কোনও দৃষ্টিতে এটি করতে পারেন

@Html.Image(Model.ImgBytes)

Comments

আমি সত্যিই এটি সর্বোত্তম পছন্দ করি - এটি মডেল এবং .cshtml ফাইলে পরিষ্কার করে তোলে। মহান !!

— কেন

Answer 5

আপনি যদি আপনার বাইটগুলি বেস -64 এনকোড করতে পারেন তবে আপনি ফলাফলটি আপনার চিত্রের উত্স হিসাবে ব্যবহার করতে চেষ্টা করতে পারেন। আপনার মডেলটিতে আপনি এর মতো কিছু যুক্ত করতে পারেন:

public string ImageSource
{
    get
    {
        string mimeType = /* Get mime type somehow (e.g. "image/png") */;
        string base64 = Convert.ToBase64String(yourImageBytes);
        return string.Format("data:{0};base64,{1}", mimeType, base64);
    }
}

এবং আপনার দৃষ্টিতে:

<img ... src="@Model.ImageSource" />

Answer 6

চিত্রটি যদি বড় না হয় এবং যদি খুব ভাল সুযোগ থাকে তবে আপনি প্রায়শই চিত্রটি পুনরায় ব্যবহার করতে পারবেন এবং যদি আপনার খুব বেশি না থাকে এবং যদি চিত্রগুলি গোপন না থাকে (মানে এটি কোনও বড় নয়) যদি কোনও ব্যবহারকারী সম্ভাব্যভাবে অন্য ব্যক্তির চিত্র দেখতে পারে তবে লেনদেন করুন ...)

এখানে প্রচুর "যদি" থাকে, সুতরাং এটির একটি ভাল ধারণা এটি একটি খারাপ ধারণা:

আপনি Cacheঅল্প সময়ের জন্য ইমেজ বাইটগুলিতে সঞ্চয় করতে পারেন এবং কোনও ক্রিয়া পদ্ধতির দিকে ইঙ্গিত করে একটি চিত্র ট্যাগ তৈরি করতে পারেন, যা ফলশ্রুতিতে ক্যাশে থেকে পড়ে এবং আপনার চিত্রটি ছড়িয়ে দেয়। এটি ব্রাউজারটিকে যথাযথভাবে চিত্রটি ক্যাশে করার অনুমতি দেবে।

// In your original controller action
HttpContext.Cache.Add("image-" + model.Id, model.ImageBytes, null,
    Cache.NoAbsoluteExpiration, TimeSpan.FromMinutes(1),
    CacheItemPriority.Normal, null);

// In your view:
<img src="@Url.Action("GetImage", "MyControllerName", new{fooId = Model.Id})">

// In your controller:
[OutputCache(VaryByParam = "fooId", Duration = 60)]
public ActionResult GetImage(int fooId) {
    // Make sure you check for null as appropriate, re-pull from DB, etc.
    return File((byte[])HttpContext.Cache["image-" + fooId], "image/gif");
}

পুরানো ব্রাউজারগুলিতে কাজ করার এটির অতিরিক্ত সুবিধা (বা এটি ক্রাচ?) রয়েছে, যেখানে ইনলাইন চিত্রগুলি আই 7 (বা 328 বিবি এর চেয়ে বড় যদি আইই 8) তে কাজ করে না।

Answer 7

এটি মনোজের উত্তরের একটি পরিবর্তিত সংস্করণ যা আমি কোনও প্রকল্পে ব্যবহার করি। একটি ক্লাস, এইচটিএমএল বৈশিষ্ট্য এবং ট্যাগবিল্ডার ব্যবহার করতে সবেমাত্র আপডেট হয়েছে।

    public static IHtmlString Image(this HtmlHelper helper, byte[] image, string imgclass, 
                                     object htmlAttributes = null)
    {
        var builder = new TagBuilder("img");
        builder.MergeAttribute("class", imgclass);
        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        var imageString = image != null ? Convert.ToBase64String(image) : "";
        var img = string.Format("data:image/jpg;base64,{0}", imageString);
        builder.MergeAttribute("src", img);

        return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
    }

যা নিম্নলিখিত হিসাবে ব্যবহার করা যেতে পারে:

    @Html.Image(Model.Image, "img-cls", new { width="200", height="200" })

Answer 8

আপনার ডিবিতে আপনার একটি বাইট থাকতে হবে।

আমার বাইট [] আমার ব্যক্তি অবজেক্টে রয়েছে:

public class Person
{
    public byte[] Image { get; set; }
}

আপনার বাইট [] কে স্ট্রিংয়ে রূপান্তর করতে হবে। সুতরাং, আমি আমার নিয়ামকটিতে রয়েছি:

String img = Convert.ToBase64String(person.Image);

এরপরে, আমার .cshtml ফাইলে আমার মডেলটি একটি ভিউমোডেল। এটি আমার মধ্যে রয়েছে:

 public String Image { get; set; }

আমি এটি আমার .cshtml ফাইলে এটি ব্যবহার করি:

<img src="@String.Format("data:image/jpg;base64,{0}", Model.Image)" />

"ডেটা: চিত্র / চিত্র ফাইল এক্সটেনশান ; বেস 64, {0}, আপনার চিত্রের স্ট্রিং "

আমি আশা করি এটি কারও সাহায্য করবে!

Answer 9

আপনি যদি চিত্রটি উপস্থাপন করতে চান তবে সহায়ক পদ্ধতি বা নিজেই মডেলটিতে একটি পদ্ধতি যুক্ত করুন এবং সেই পদ্ধতিটিকে বাইট অ্যারে চিত্রটিকে পিএনজি বা জেপিজির মতো চিত্র বিন্যাসে রূপান্তর করতে অনুমতি দিন এবং তারপরে বেস 64 স্ট্রিংয়ে রূপান্তর করুন। একবার আপনার এটি হয়ে গেলে বিন্যাসে আপনার ভিউটিতে বেস 64 মানটি বাঁধুন

"ডেটা: চিত্র / [চিত্রের ফাইলের ধরণের এক্সটেনশন] ; বেস 64, [আপনার বেস64 স্ট্রিংটি এখানে চলেছে] "

imgউপরেরটি ট্যাগের srcবৈশিষ্ট্যে নির্ধারিত হয় ।

এর সাথে আমার একমাত্র সমস্যাটি হ'ল বেস 64 স্ট্রিংটি খুব দীর্ঘ। সুতরাং, আমি ভিউতে একাধিক মডেল দেখানোর জন্য এটির প্রস্তাব দেব না।

Comments

আপনি একটি সমস্যা এনেছেন এবং কোনও ব্যবহারের ক্ষেত্রে দৃশ্যের প্রস্তাব দিচ্ছেন না, তবে আপনার ব্যবহারের ক্ষেত্রে কোনও দৃশ্যের সমাধান করবেন না solution এটি আপনার উত্তরকে আরও সুন্দর / কার্যকর এবং আরও তথ্যপূর্ণ করে তুলত।

— কেন

Answer 10

আমি নীচে অ্যাসওয়ারের উপর ভিত্তি করে একটি সহায়ক পদ্ধতি তৈরি করেছি এবং আমি খুব আনন্দিত যে এই সহায়ক সাহায্যকারী যতটা সম্ভব সাহায্য করতে পারেন।

একটি মডেল সহ:

 public class Images
 {
    [Key]
    public int ImagesId { get; set; }
    [DisplayName("Image")]
    public Byte[] Pic1 { get; set; }
  }

সহায়ক হ'ল:

public static IHtmlString GetBytes<TModel, TValue>(this HtmlHelper<TModel> helper, System.Linq.Expressions.Expression<Func<TModel, TValue>> expression, byte[] array, string Id)
    {
        TagBuilder tb = new TagBuilder("img");
        tb.MergeAttribute("id", Id);
        var base64 = Convert.ToBase64String(array);
        var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
        tb.MergeAttribute("src", imgSrc);
        return MvcHtmlString.Create(tb.ToString(TagRenderMode.SelfClosing));
    }

দর্শনটি একটি গ্রহণ করছে: আইকোলিকেশন অবজেক্ট যাতে আপনার ভবিষ্যদ্বাণী বিবৃতিতে ভিউতে এটি ব্যবহার করা প্রয়োজন:

 @foreach (var item in Model)
  @Html.GetBytes(itemP1 => item.Pic1, item.Graphics, "Idtag")
}