无论如何，是否可以使用 asp.net mvc 从 3 个图像 URL 中制作一个图像？
Is there anyway to make one image out of 3 image URLs using asp.net mvc?
我想构建一个类似于 nametest 或 Meaww 的 facebook 应用程序，并且几乎成功地 API 调用了来自 facebook 的 Facebook Graph API 和 return 数据。
让我感到困惑的是上述 Web 应用程序的 UI。当您在 Meaww 或 Nametests 上完成测试时，结果以图像 (Jpeg) 格式呈现给用户。我只是不知道他们如何设法将 HTML 转换为具有所有 CSS 样式等的即时图像，以及他们如何 return 将其作为图像返回给用户？
ASP.NET MVC Too 中是否可以将此场景付诸实践？如果是，那么我需要提示才能做到这一点。
下面是喵喵测试生成的图片。
编辑：
更加具体...
我的控制器中有一个 public async Task<ActionResult> FB_Analyse() 操作，它通过 Graph API 调用 facebook 从 facebook 获取数据，然后将数据值传递给模型，然后在操作结束时 returns 一个视图如下：
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 用户朋友的图片，它们都放在背景图片的顶部。
我要达到的目标是晴朗如蓝天。我想将这三张图片合二为一，然后作为一张图片展示给用户。
请帮帮我，我迷路了。
经过大量网上冲浪和深入分析后 Meaww and Nametests I have found out that they are using a third party tool for their image hosting and manipulation which Cloudinary。
I am answering my own question so that any other person who faces such
a problem shouldn't be bothered with a lot of stuff and testing
different third party libraries which is not relevant to the problem
at all as I were struggling much with the same.
先说说Cloudinary：
Cloudinary 是一项 cloud-based 服务，提供 end-to-end 图像管理解决方案，包括上传、存储、操作、优化和交付。
使用Cloudinary，您可以轻松将图片上传到云端，自动执行智能图片操作，无需安装任何复杂的软件。然后，您的所有图像都通过快速 CDN 无缝交付，经过优化并使用行业最佳实践。 Cloudinary 提供全面的 API 和管理功能，并且易于与新的和现有的 Web 和移动应用程序集成。
Cloudinary 提供 SDK 并支持各种编程技术，包括 .Net, PHP, Java, Rubby 等...
还有一些类似于 Cloudinary 的其他服务，例如 Blitline，但 Cloudinary 的好处是该服务同时适用于程序员和 non-programmers。这意味着如果某人没有编程经验，他仍然可以使用此服务。因为它为用户提供了一个非常智能的仪表板。
我想我已经提出了太多的观点，所以现在是时候有点实际地回答这个问题了。
要处理上述问题，我们必须通过包管理器控制台使用以下命令安装 CloudinaryDotNet nuget 包。
Install - Package CloudinaryDotNet
安装包后，我们可以实例化我们对 Cloudinary 服务的 API 调用。
注：
1st. 我们必须创建一个 Cloudinary 帐户。幸运的是 Cloudinary 提供了一个没有时间限制的免费帐户。
2nd. 在您的 .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 操作图像就很简单了：
您可以manipulate/transform任何图像：
1. 定位在另一幅图像中。
2. 放置效果如"sepia"。
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")
老实说，对我来说就是这样。
我想构建一个类似于 nametest 或 Meaww 的 facebook 应用程序，并且几乎成功地 API 调用了来自 facebook 的 Facebook Graph API 和 return 数据。 让我感到困惑的是上述 Web 应用程序的 UI。当您在 Meaww 或 Nametests 上完成测试时，结果以图像 (Jpeg) 格式呈现给用户。我只是不知道他们如何设法将 HTML 转换为具有所有 CSS 样式等的即时图像，以及他们如何 return 将其作为图像返回给用户？ ASP.NET MVC Too 中是否可以将此场景付诸实践？如果是，那么我需要提示才能做到这一点。
下面是喵喵测试生成的图片。
编辑：
更加具体...
我的控制器中有一个 public async Task<ActionResult> FB_Analyse() 操作，它通过 Graph API 调用 facebook 从 facebook 获取数据，然后将数据值传递给模型，然后在操作结束时 returns 一个视图如下：
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 用户朋友的图片，它们都放在背景图片的顶部。
我要达到的目标是晴朗如蓝天。我想将这三张图片合二为一，然后作为一张图片展示给用户。
请帮帮我，我迷路了。
经过大量网上冲浪和深入分析后 Meaww and Nametests I have found out that they are using a third party tool for their image hosting and manipulation which Cloudinary。
I am answering my own question so that any other person who faces such a problem shouldn't be bothered with a lot of stuff and testing different third party libraries which is not relevant to the problem at all as I were struggling much with the same.
先说说Cloudinary：
Cloudinary 是一项 cloud-based 服务，提供 end-to-end 图像管理解决方案，包括上传、存储、操作、优化和交付。
使用Cloudinary，您可以轻松将图片上传到云端，自动执行智能图片操作，无需安装任何复杂的软件。然后，您的所有图像都通过快速 CDN 无缝交付，经过优化并使用行业最佳实践。 Cloudinary 提供全面的 API 和管理功能，并且易于与新的和现有的 Web 和移动应用程序集成。
Cloudinary 提供 SDK 并支持各种编程技术，包括 .Net, PHP, Java, Rubby 等...
还有一些类似于 Cloudinary 的其他服务，例如 Blitline，但 Cloudinary 的好处是该服务同时适用于程序员和 non-programmers。这意味着如果某人没有编程经验，他仍然可以使用此服务。因为它为用户提供了一个非常智能的仪表板。
我想我已经提出了太多的观点，所以现在是时候有点实际地回答这个问题了。
要处理上述问题，我们必须通过包管理器控制台使用以下命令安装 CloudinaryDotNet nuget 包。
Install - Package CloudinaryDotNet
安装包后，我们可以实例化我们对 Cloudinary 服务的 API 调用。
注：
1st. 我们必须创建一个 Cloudinary 帐户。幸运的是 Cloudinary 提供了一个没有时间限制的免费帐户。
2nd. 在您的 .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 操作图像就很简单了：
您可以manipulate/transform任何图像： 1. 定位在另一幅图像中。 2. 放置效果如"sepia"。 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")
老实说，对我来说就是这样。