Is there a way to make a single image from 3 image urls using asp.net mvc?

Question

I would like to create a facebook application similar to nametest or Meww, and have almost succeeded in making my Facebook Graph API calls and return data from facebook. What scares me is the user interface of the aforementioned web applications. When you complete the Meww or Nametests test, the result is presented to the user in Image (Jpeg) format. I just don't know how they manage to convert HTML to image on the fly with all CSS styles, etc. And how do they return it to the user as an image? Can this scenario be put into practice in ASP.NET MVC Too? If so, then I need a hint.

Below is the image generated by the field as a result of the test.

Edit: To be more specific ... I have a public async Task<ActionResult> FB_Analyse() in my controller, which takes data from facebook through a call to the public async Task<ActionResult> FB_Analyse() API on facebook, and then passes the data values ​​of the model, and then completes the Action as below:

  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 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); } 

Then, in my opinion, I have this simple <div> with images, as shown below:

 <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> 

As you can see, I have three different <img> tags. One of them is the background for two other images, and the other two are one image of a Facebook user, and the second is for an image of a friend of facebook, which is placed at the top of the background image. What I want to achieve is as clear as a blue sky. I want to combine these three images in one, and then show it to the user as one image.

Please help me get lost.

Answer 1

SO after a lot of web surfing and in-depth analysis of Meaww and Nametests I found out that they use a third-party tool to host and manipulate images that are Cloudinary .

I answer my question so that any other person who encounters such a problem should not be bothered by many things and testing various third-party libraries that are not related to the problem at all, since I struggled a lot with the same.

Let's first make a few points about Cloudinary : CloudMan is a cloud service that provides a complete image management solution, including upload, storage, manipulation, optimization, and delivery.

With CloudLine, you can easily upload images to the cloud, automatically perform intelligent manipulations without installing any complex software. All your images are then easily delivered through a fast CDN, optimized, and using industry best practices. CloudMan offers comprehensive APIs and administration capabilities and integrates seamlessly with new and existing web and mobile applications.

Cloudinary offers an SDK and supports various programming technologies, including .Net, PHP, Java, Rubby , etc.

There are other services similar to Cloudinary , such as Blitline , but the good thing about Cloudinary is that this service is for both programmers and non-programmers. If someone does not have programming experience, he can still use this service. Since it provides users with a very intelligent toolbar.

I think that I have already made too many points, so it's time to work a bit to answer the question.

To deal with the above problem, we need to get the CloudinaryDotNet nuget package with the following command through the package manager console.

Install - Package CloudinaryDotNet

After installing the Package, we can create our API calls for Cloudinary services. Note: 1st. We need to make a Cloudinary account. Fortunately, Cloudinary offers a free account with no time limit. 2. Set up your Cloudinary account under the .Net project.

 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); 

Uploading images using Cloudinary: To manage images, images must already be uploaded to your Cloudinary account. This can be done directly from the Cloudinary toolbar or programmatically from your web application, as shown below:

 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. 

When all of the above is set in place, then managing images with Cloudinary is simple as:

You can manipulate / transform any image: 1. Positioned on another image. 2. Place an effect similar to sepia. 3. Put text on it and a lot . The following is a simple example:

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

And honestly for me that's all.