क्या एएसपीएनटी एमवीसी का उपयोग कर 3 छवि यूआरएल में से एक छवि बनाने के लिए वैसे भी है?

Question

मैं नमस्तेस्ट या मीव के समान एक फेसबुक एप्लिकेशन बनाना चाहता हूं और लगभग मेरी एपीआई फेसबुक ग्राफ एपीआई को कॉल करने और फेसबुक से डेटा वापस करने में सफल रहा। मुझे उलझन में क्या बनाता है उपर्युक्त वेब अनुप्रयोगों का यूआई है। जब आप Meaww या Nametests पर एक परीक्षण पूरा करते हैं तो परिणाम उपयोगकर्ता को छवि (जेपीईजी) प्रारूप में दर्शाया जाता है। मुझे नहीं पता कि वे एचटीएमएल को सभी सीएसएस स्टाइल और इत्यादि के साथ फ्लाई पर एक छवि में कनवर्ट करने के लिए कैसे प्रबंधित करते हैं और वे इसे छवि के रूप में वापस उपयोगकर्ता के रूप में वापस कैसे करते हैं? क्या इस परिदृश्य को एएसपी.नेट एमवीसी में अभ्यास में रखना संभव है? यदि हां, तो मुझे ऐसा करने के लिए एक संकेत चाहिए।

नीचे एक परीक्षण खेलने का एक परिणाम के रूप Meaww द्वारा उत्पन्न एक छवि है।

संपादित करें: अधिक विशिष्ट होना करने के लिए ... मैं अपने नियंत्रक में एक public async Task<ActionResult> FB_Analyse() कार्रवाई जो फेसबुक के लिए एक ग्राफ़ API कॉल के माध्यम फेसबुक से डेटा लेता है और फिर एक के लिए डेटा मान पास है

public async Task<ActionResult> FB_Analyse() 
     { 

      var access_token = HttpContext.Items["access_token"].ToString(); 
      if (!string.IsNullOrEmpty(access_token)) 
      { 

       var appsecret_proof = access_token.GenerateAppSecretProof(); 

       var fb = new FacebookClient(access_token); 

       #region FacebookUser Name and Picture plus other Info 
       //Get current user's profile 
       dynamic myInfo = await fb.GetTaskAsync("me?fields=first_name,last_name,link,locale,email,name,birthday,gender,location,age_range,about".GraphAPICall(appsecret_proof)); 

       dynamic myinfojson = JsonConvert.DeserializeObject(myInfo.ToString()); 

       ViewBag.UserName = myinfojson.name; 
       ViewBag.UserGender = myinfojson.gender; 

       //get current picture 
       dynamic profileImgResult = await fb.GetTaskAsync("{0}/picture?width=200&height=200&redirect=false".GraphAPICall((string)myInfo.id, appsecret_proof)); 

       ViewBag.ProfilePictureURL = profileImgResult.data.url; 

       #endregion 

       dynamic myFeed = await fb.GetTaskAsync(
        ("me/feed?fields=likes{{name,pic_large}}") 
        .GraphAPICall(appsecret_proof)); 
       string result = myFeed.ToString(); 
       var jsonResult = JsonConvert.DeserializeObject<RootObject>(result); 

       var likes = new List<Datum2>(); 

       foreach (var likeitem in jsonResult.data) 
       { 
        if (likeitem.likes != null) 
        { 
         foreach (var feedlikeitem in likeitem.likes.data) 
         { 
          likes.Add(feedlikeitem); 
         } 
        } 
       } 
return view(likes); 
} 

तो मेरी नजर में मैं नीचे के रूप में छवियों के साथ इस सरल <div> टैग है:

मॉडल और फिर कम से एक्शन के अंत के रूप में नीचे एक दृश्य देता है

<div class="imageWrapper" style="position: relative"> 
<img class="girl img-responsive" src="~/images/TestPictures/mHiDMsL.jpg" style="position: relative; z-index: 1;" /> 
<img src="@ViewBag.Picture" alt=.. width="100" height="100" style="position: absolute;left:80px; top: 80px;z-index: 10;" /> 
<img src="@ViewBag.ProfilePictureURL" alt=.. width="200" height="200" style="position: absolute;left:300px; top: 160px;z-index: 11;" /> 
</div> 

जैसा कि आप देख सकते हैं कि मेरे पास तीन अलग-अलग <img> टैग हैं। एक दो अन्य छवियों के लिए पृष्ठभूमि है और दो अन्य एक फेसबुक उपयोगकर्ता चित्र है और दूसरा फेसबुक उपयोगकर्ता मित्र की तस्वीर के लिए है जो दोनों पृष्ठभूमि छवि के शीर्ष पर रखा गया है। जो मैं प्राप्त करना चाहता हूं वह नीला आकाश के रूप में स्पष्ट है। मैं इन तीन चित्रों को एक में जोड़ना चाहता हूं और फिर इसे उपयोगकर्ता को एक छवि के रूप में दिखाऊंगा।

कृपया मदद मैं हार रहा हूँ।

Answer 1

एसओ के बाद नेट पर सर्फिंग और गहरे विश्लेषण करने का एक बहुत Meaww और Nametests मुझे पता चला है कि वे अपनी छवि होस्टिंग और हेरफेर जो Cloudinary के लिए एक तीसरी पार्टी उपकरण का उपयोग कर रहे हैं।

मैं अपने खुद के प्रश्न का उत्तर देते हैं, जिससे कि किसी अन्य व्यक्ति जो इस तरह के एक समस्या का सामना कर रहा सामान और विभिन्न तीसरे पक्ष के पुस्तकालयों का परीक्षण का एक बहुत जो समस्या बिल्कुल लिए प्रासंगिक नहीं है के साथ परेशान नहीं किया जाना चाहिए क्योंकि मैं इसके साथ बहुत संघर्ष कर रहा था। Cloudinary एक क्लाउड-आधारित सेवा है जो अपलोड, भंडारण, जोड़तोड़, अनुकूलन और वितरण सहित एंड-टू-एंड छवि प्रबंधन समाधान प्रदान करता है:

Cloudinary पहले के बारे में कुछ अंक बनाने की सुविधा देता है।

Cloudinary साथ आप आसानी से बादल करने के लिए छवियों को अपलोड, स्वचालित रूप से किसी भी जटिल सॉफ़्टवेयर इंस्टॉल किए बिना स्मार्ट छवि जोड़तोड़ प्रदर्शन कर सकते हैं। तब आपकी सभी छवियों को एक तेज़ सीडीएन के माध्यम से निर्बाध रूप से वितरित किया जाता है, अनुकूलित किया जाता है और उद्योग के सर्वोत्तम प्रथाओं का उपयोग किया जाता है। क्लाउडिनरी व्यापक एपीआई और प्रशासन क्षमताओं की पेशकश करता है और नए और मौजूदा वेब और मोबाइल अनुप्रयोगों के साथ एकीकृत करना आसान है।

Cloudinary.Net, PHP, Java, Rubby और आदि सहित प्रोग्रामिंग प्रौद्योगिकियों की विविधता के लिए एसडीके और सहायता प्रदान करता है ...

वहाँ Blitline तरह Cloudinary के लिए इसी तरह कुछ अन्य सेवाओं लेकिन अच्छी बात के बारे में Cloudinary कि इस सेवा दोनों प्रोग्रामर के लिए है रहे हैं और गैर प्रोग्रामर। मतलब है कि अगर किसी को प्रोग्रामिंग में कोई अनुभव नहीं है तो भी वह इस सेवा का उपयोग कर सकता है। चूंकि यह उपयोगकर्ताओं को एक बहुत बुद्धिमान डैशबोर्ड प्रदान करता है।

मुझे लगता है कि मैंने पहले से ही बहुत सारे अंक बनाए हैं, इसलिए सवाल का जवाब देने के लिए थोड़ा व्यावहारिक समय है।

उपरोक्त मुद्दे को संभालने के लिए हमें पैकेज प्रबंधक कंसोल के माध्यम से निम्न आदेश के साथ CloudinaryDotNet nuget पैकेज स्थापित करना होगा।

Install - Package CloudinaryDotNet

पैकेज हम Cloudinary सेवाओं के लिए हमारी API कॉल का दृष्टांत कर सकते हैं की स्थापना करने पर

। नोट: पहला। हमें Cloudinary खाता बनाना है। सौभाग्य से Cloudinary कोई समय सीमा के साथ एक मुफ्त खाता प्रदान करता है। दूसरा। अपने Cloudinary खाते को अपने .Net प्रोजेक्ट में कॉन्फ़िगर करें।

Cloudinary साथ

using CloudinaryDotNet; 
using CloudinaryDotNet.Actions; 
Account account = new Account(
"my_cloud_name", // Upon creating account you'll be given a cloud name. 
"my_api_key", // Your API Key/Id. 
"my_api_secret"); // Your App Secret. 

Cloudinary cloudinary = new Cloudinary(account); 

छवि अपलोड: आदेश में छवियों छवियों पहले से ही अपने Cloudinary खाते में अपलोड किया जाना चाहिए हेरफेर करने के लिए सक्षम होने के लिए। यह अपने वेब अनुप्रयोग के रूप में नीचे से प्रोग्राम के रूप में Cloudinary सीधे डैशबोर्ड से किया जा सकता है या:

var uploadParams = new ImageUploadParams() 
       { 
        File = new FileDescription("File Path or Directly for a URL"), 
        PublicId = "sample_id",// each image on the server should be named differently if this option is not assigned cloudinary will automatically assign one to it. 
        Tags = "Tags for Images", 
       }; 
var uploadParamsResult= cloudinary.Upload(uploadParams); // this line will upload image to the cloudinary server. 

सब कुछ ऊपर जगह पर सेट किया जाता है, तो Cloudinary के साथ छवियों को जोड़ तोड़ सरल है के रूप में:

आप में हेरफेर कर सकते हैं/किसी भी छवि को बदलने के लिए: 1. किसी अन्य छवि में स्थित है। 2. "सेपिया" जैसे प्रभाव डालें। 3. इसे छवियों और many टेक्स्ट के साथ ओवरले करें। नीचे एक साधारण उदाहरण है:

@Model.Api.UrlImgUp.Transform(new Transformation().Width("700").Height("370") 
.Effect("sepia").Width("200").Height("200").Crop("thumb").Gravity("face").Radius("max").Overlay("image1").Gravity("west").Y(18).X(20) 
     .Chain().Width("150").Height("150").Crop("fill").Radius("20").Border(4, "#553311").Overlay("image2").Gravity("east").Y(18).X(20)).BuildImageTag("Background_Pic") 

और ईमानदारी से मेरे लिए यह सब कुछ है।