क्या यह वेब फ़ाइल को पहले फ़ाइल में सहेजे बिना प्रदर्शित करने के लिए संभव है?

Question

मुझे सच में यकीन नहीं है कि मैं WebImage कक्षा का सही उपयोग कर रहा हूं।

मेरे पास एक नियंत्रक है जो डेटाबेस से एक फोटो और कुछ संबंधित जानकारी (टिप्पणियां, अपलोड दिनांक, फ़ाइल नाम) खींचता है। मैं एक आंशिक दृश्य वापस करना चाहता हूं जिसमें यह जानकारी शामिल है, और अतिरिक्त जानकारी के साथ छवि प्रदर्शित करें।

इसलिए मैंने बाइट सरणी से एक नया वेब इमेज बनाया, लेकिन मैं इसे कैसे प्रदर्शित करूं?

this article के अनुसार यह बहुत आसान होना चाहिए

1. आप उस्तरा वाक्य रचना के साथ काम करते हैं और एक चर बनाने कि छवि में शामिल होंगे की जरूरत है: तो फिर
   @{ var myImage = WebImage("/Content/myImage.jpg") // Work with the image… }

2. , में पृष्ठ में छवि को लोड करने के लिए, आपको वैरिएबल दिखाना होगा जिसमें HTML <img/> ta के अंदर छवि शामिल है छ:
   <img src="@myImage"/>

कि सिवाय काम नहीं करता है, यह सिर्फ <img src="System.Web.Helpers.WebImage"> आउटपुट और बुला .Write मदद नहीं करता है।

क्या ऐसा करने का कोई तरीका है या क्या मुझे अपनी कार्रवाई को दो अलग-अलग कार्रवाइयों में विभाजित करने की आवश्यकता है, एक फोटो जानकारी वापस करने के लिए और एक फोटो को वापस करने के लिए?

Answer 1

किसी भी रेज़र दृश्य में ऐसा करने के लिए वैसे भी नहीं है ... आपको छवि प्रस्तुत करने के लिए एक अलग कार्रवाई करने की आवश्यकता है।

पृष्ठ पर आईएमजी टैग img src में प्रदान किए गए यूआरएल के आधार पर सर्वर पर एक पृथक http कॉल करने जा रहा है।

Answer 2

मुझे विश्वास नहीं है कि वेब इमेज सहायक एक स्ट्रीम को लिखने की क्षमता प्रदान करता है। इसके कारण, आपको फ़ाइल को एक अस्थायी स्थान (या एक कैश करने योग्य स्थान) में सहेजने की आवश्यकता होगी और फिर बाइट्स को पढ़ना होगा, और छवि को FileStreamResult सामग्री प्रकार और डेटा निर्दिष्ट करने के रूप में वापस लिखना होगा।

Answer 3

आप इसे फ्लाई पर लिख सकते हैं!

आप वेबइमेज का उपयोग नहीं करते हैं। (जैसे), जैसा कि आप सोचेंगे, इसके बजाय आप WebImage.GetBytes() का उपयोग करते हैं।

इस उदाहरण में, आपने डेटाबेस को बाइट सरणी के रूप में पहले ही सहेजा है। केवल जेपीईएस को संभालने के लिए थोड़ा सा सरलीकृत करें।

/// <summary> 
    /// Reference this in HTML as <img src="/Photo/WatermarkedImage/{ID}" /> 
    /// Simplistic example supporting only jpeg images. 
    /// </summary> 
    /// <param name="ID">Photo ID</param> 
    public ActionResult WatermarkedImage(Guid ID) 
    { 
     // Attempt to fetch the photo record from the database using Entity Framework 4.2. 
     var photo = db.Photos.Find(ID); 

     if (photo != null) // Found the indicated photo record. 
     { 
      // Create WebImage from photo data. 
      // Should have 'using System.Web.Helpers' but just to make it clear... 
      var wi = new System.Web.Helpers.WebImage(photo.Data); 

      // Apply the watermark. 
      wi.AddImageWatermark(Server.MapPath("~/Content/Images/Watermark.png"), 
           opacity: 75, 
           horizontalAlign: "Center", 
           verticalAlign: "Bottom"); 

      // Extract byte array. 
      var image = wi.GetBytes("image/jpeg"); 

      // Return byte array as jpeg. 
      return File(image, "image/jpeg"); 
     } 
     else // Did not find a record with passed ID. 
     { 
      return null; // 'Missing image' icon will display on browser. 
     } 
    } 

Answer 4

छवि प्रदर्शित करने के लिए Data URLs का उपयोग करने का प्रयास करें। यह अस्थायी रूप से छवि को डिस्क पर सहेजने और छवि लाने के लिए एक दूसरा HTTP अनुरोध से बचने से बच जाएगा। आपको छवि इनलाइन को एन्कोड करने के लिए केवल एक राउंड ट्रिप करने की आवश्यकता होगी।

Answer 5

आप वेबइमेज को बेस 64 एन्कोडेड स्ट्रिंग में परिवर्तित कर सकते हैं और पृष्ठ पर डेटा यूआरएल में उपयोग कर सकते हैं। एक HTML कैनवास का उपयोग करना इसे पूरा करना आसान बनाता है।

सर्वर साइड Base64 स्ट्रिंग पैदा करते हैं और उस्तरा वाक्य रचना जावास्क्रिप्ट कोड जो ब्राउज़र में छवि renders में डेटा यूआरएल इंजेक्षन का उपयोग करना डेटा यूआरएल

// C# Razor code 
WebImage myWebImage; 
// you need to now set the WebImage object in your code 
string imagebase64string = Convert.ToBase64String(myWebImage.GetBytes()); 
string dataUrl = string.Format("data:image/jpeg;base64,{0}", imagebase64string); 

बनाने पर पृष्ठ के लोड:

// Javascript Code 
var myCanvas = document.getElementById('my-image-canvas'); 
var imageCtx = myCanvas.getContext('2d'); 
var myImage = new Image; 
myImage.onload = function() { 
    imageCtx.drawImage(myImage, 0, 0); 
} 
myImage.src = '@dataUrl'; 

नीचे एक नमूना अनुप्रयोग से लिंक है जो इस अवधारणा को प्रदर्शित करता है और यह दिखाता है कि एक ही अवधारणा का उपयोग करके एक एकल रेजर पृष्ठ का उपयोग करके एएसपी.Net चार्ट आसानी से कैसे प्रस्तुत किया जाए।

https://github.com/webextant/webimage