Is there anyway to make one image out of 3 image URLs using asp.net mvc?

Question

I would like to build a facebook application similar to nametest or Meaww and almost succeeded to have my API calls to Facebook Graph API and return data from facebook. What makes me confused is the UI of aforementioned web applications. When you complete a test on Meaww or Nametests the result is represented to the user is in Image (Jpeg) format. I just don't know how they manage to convert HTML to an Image on the fly with all CSS styling and etc and how they return it back to the user as an Image? Is it possible to put this scenario into practice in ASP.NET MVC Too? If yes, So I need a hint to do it.

Below is an Image generated by Meaww as a result of playing a test.

Edit: To be more specific... I have a public async Task<ActionResult> FB_Analyse() action in my controller which takes data from facebook via a Graph API call to facebook and then pass the data values to a model and at then end of Action returns a view 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'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);
}

Then In my view I have this simple <div> tag with images as 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 is the background for two other images and two others is one Facebook user picture and second one is for facebook user friend's picture which both placed on the top of Background Image. What I want to achieve is clear as blue sky. I want to combine these three pictures in one and then show it to the user as one image.

Please help I am lost.

Answer 1

SO after a lot of surfing on the net and deep analyzing 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.

Lets make some points about Cloudinary first: Cloudinary is a cloud-based service that provides an end-to-end image management solution including uploads, storage, manipulations, optimizations and delivery.

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

Cloudinary offers SDK and support for variety of programming technologies including .Net, PHP, Java, Rubby and etc...

There are some other services similar to Cloudinary like Blitline but the good thing about Cloudinary is that this service is for both programmers and non-programmers. Meaning if someone has no experience in programming he still can make use of this service. As it provides the users with a very intelligent dashboard.

I think I've already made too many points, So this is time to get a bit practical to answer the question.

To handle above issue we have to get CloudinaryDotNet nuget package installed with following command through Package Manager Console.

Install - Package CloudinaryDotNet

Upon the installation of the Package we can instantiate our API Calls to Cloudinary services. Note: 1st. We have to make a Cloudinary account. Fortunately Cloudinary offers a free account with no time limit. 2nd. Configure your Cloudinary account within your .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);

Image Upload with Cloudinary: In order to be able to manipulate images the images should be already uploaded within your Cloudinary account. This can be done directly from Cloudinary dashboard or programmatically from your web application as 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 everything above is set on place, then manipulating images with Cloudinary is simple as:

You can manipulate/transform any image to be: 1. Positioned in another image. 2. Place an effect like "sepia". 3. Overlay it with text an Images and many more. Below 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 is all.