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

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

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

在此处输入图像描述

编辑:更具体一点……我的控制器中有一个public async Task FB_Analyse()动作,它通过图形API调用从facebook获取数据到facebook,然后将数据值传递给模型,然后结束of Action返回如下视图:

  public async Task 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(result); var likes = new List(); foreach (var likeitem in jsonResult.data) { if (likeitem.likes != null) { foreach (var feedlikeitem in likeitem.likes.data) { likes.Add(feedlikeitem); } } } return view(likes); } 

然后在我看来,我有这个简单的

标签,图像如下:

 
.. ..

如您所见,我有三个不同的标签。 一个是两个其他图像的背景,另外两个是一个Facebook用户图片,第二个是Facebook用户朋友的图片,它们都放在背景图像的顶部。 我想要达到的目标就像蓝天一样清晰。 我想将这三张图片合二为一,然后将其作为一张图片显示给用户。

请帮助我迷路了。

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

我正在回答我自己的问题,以便任何其他面临这样一个问题的人不应该被许多东西打扰,并且测试不同的第三方图书馆,因为我正在努力解决这个问题。

让我们先谈谈Cloudinary Cloudinary是一种基于云的服务,提供端到端的图像管理解决方案,包括上传,存储,操作,优化和交付。

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

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

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

我想我已经提出了太多的观点,所以现在是时候回答这个问题了。

要处理上述问题,我们必须通过Package Manager Console通过以下命令安装CloudinaryDotNet nuget软件包。

Install - Package CloudinaryDotNet

在安装Package之后,我们可以将我们的API调用实例Cloudinary服务。 注意: 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") 

说实话,对我来说就是这样。