反正有使用asp.net mvc從3個圖像URL中制作一個圖像嗎？

Question

我想構建一個類似於nametest或Meaww的Facebook應用程序，並且幾乎成功地將我的API調用到Facebook Graph API並從facebook返回數據。 使我感到困惑的是上述Web應用程序的UI。 當您在Meaww或Nametests上完成測試時，結果以圖像（Jpeg）格式顯示給用戶。 我只是不知道他們如何通過所有CSS樣式等將HTML即時轉換為Image，如何將它們作為Image返回給用戶？ 是否可以在ASP.NET MVC Too中將這種情況付諸實踐？ 如果是，那么我需要提示。

以下是Meaww通過測試生成的圖像。

編輯：更具體地說...我的控制器中有一個public async Task<ActionResult> FB_Analyse()動作，該動作通過Graph API調用從Facebook接收來自Facebook的數據，然后將數據值傳遞給模型，然后結束of Action返回一個視圖，如下所示：

 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>標簽。 一個是另外兩張圖片的背景，另外兩張是一張Facebook用戶圖片，第二張是Facebook用戶朋友的圖片，兩者均位於背景圖片的頂部。 我要實現的目標是湛藍的天空。 我想將這三張圖片合二為一，然后以一張圖片的形式展示給用戶。

請幫助我迷路。

Answer 1

在網絡上和深分析很多沖浪后SO Meaww和Nametests我發現他們正在使用第三方工具，他們的形象托管和其操控Cloudinary 。

我在回答自己的問題，這樣，其他面對此類問題的人就不會被很多事情困擾，並且不必測試與該問題無關的其他第三方庫，因為我為此付出了很多努力。

首先讓我們對Cloudinary提出一些要點： Cloudinary是一項基於雲的服務，提供了端到端的圖像管理解決方案，包括上載，存儲，操作，優化和交付。

使用Cloudinary，您可以輕松地將圖像上傳到雲中，自動執行智能圖像操作，而無需安裝任何復雜的軟件。 然后，通過快速的CDN，優化的並使用行業最佳實踐無縫地交付所有圖像。 Cloudinary提供了全面的API和管理功能，並且易於與新的和現有的Web和移動應用程序集成。

Cloudinary提供SDK和對各種編程技術的支持，包括.Net, PHP, Java, Rubby等。

還有其他一些類似於Cloudinary服務，例如Blitline，但是Cloudinary是，該服務同時面向程序員和非程序員。 這意味着，如果沒有編程經驗，他仍然可以使用此服務。 因為它為用戶提供了非常智能的儀表板。

我想我已經提出了太多觀點，所以現在該是一點點實用的方法來回答這個問題了。

為了解決上述問題，我們必須通過Package Manager Console通過以下命令安裝CloudinaryDotNet nuget軟件包。

Install - Package CloudinaryDotNet

安裝軟件包后，我們可以實例化對Cloudinary服務的API調用。 注意： 1。 我們必須創建一個Cloudinary帳戶。 幸運的是， Cloudinary提供了一個沒有時間限制的免費帳戶。 2號 在.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帳戶中上傳了圖片。 可以直接從Cloudinary儀表板完成此操作，也可以通過Web應用程序以編程方式進行此操作，如下所示：

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.覆蓋它與文本的圖像和許多更多。 下面是一個簡單的示例：

@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")

老實說，這就是全部。