无论如何使用asp.net mvc从3个图像URL中制作一个图像？

Question

我想构建一个类似于nametest或Meaww的facebook应用程序,几乎成功地将我的API调用到Facebook Graph API并从facebook返回数据.令我困惑的是上述Web应用程序的UI.当您在Meaww或Nametests上完成测试时,结果将以图像(Jpeg)格式呈现给用户.我只是不知道他们如何设法将HTML转换为动态的图像与所有CSS样式和等等,以及他们如何将其作为图像返回给用户？是否可以在ASP.NET MVC Too中实施此场景？如果是的话,我需要一个提示来做到这一点.

下面是Meaww作为测试结果生成的图像.

编辑: 更具体一点......我public async Task<ActionResult> FB_Analyse()在我的控制器中有一个动作,它通过图形API调用从facebook获取数据到facebook,然后将数据值传递给模型,然后在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

因此，经过大量网上冲浪并深入分析Meaww和Nametests后，我发现他们正在使用第三方工具进行图像托管和操作，其中Cloudinary。

我正在回答我自己的问题，以便任何其他面临此类问题的人不应该被很多东西所困扰，并测试与问题根本无关的不同第三方库，因为我在同样的问题上苦苦挣扎。

首先我们先说明几点Cloudinary： Cloudinary 是一项基于云的服务，提供端到端图像管理解决方案，包括上传、存储、操作、优化和交付。

使用 Cloudinary，您可以轻松地将图像上传到云端，自动执行智能图像处理，而无需安装任何复杂的软件。然后，您的所有图像都会通过快速 CDN 无缝交付，并经过优化并使用行业最佳实践。Cloudinary 提供全面的 API 和管理功能，并且易于与新的和现有的 Web 和移动应用程序集成。

Cloudinary提供 SDK 并支持各种编程技术，包括.Net, PHP, Java, Rubby等等...

还有一些其他类似于 Blitline 的服务Cloudinary，但好处Cloudinary是该服务同时适用于程序员和非程序员。这意味着如果有人没有编程经验，他仍然可以使用这项服务。因为它为用户提供了一个非常智能的仪表板。

我想我已经提出了太多的观点，所以现在是时候用一些实际的东西来回答这个问题了。

为了处理上述问题，我们必须CloudinaryDotNet通过包管理器控制台使用以下命令安装 nuget 包。

Install - Package CloudinaryDotNet

安装该包后，我们可以实例化对Cloudinary服务的 API 调用。 注： 1. 我们必须做一个Cloudinary帐户。幸运的是，Cloudinary提供了一个没有时间限制的免费帐户。 第二。在您的项目中配置您的Cloudinary帐户.Net。

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 ("拇指").Gravity("脸").Radius("max").Overlay("image1").Gravity("西").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")

老实说，对我来说仅此而已。