How to make return the result of (need to bind image to view) webapi to getjson?

Question

I am working on webapi. I had optimized the images and saving in folder here. I had uploaded images into one folder before uploading in to the destination folder.

I am optimizing a single image in to 3 different sizes (large, thumbnail, medium) but image sizes are saved in one folder, now I need to make return those images to view page and bind to view page. How can I do that? I am new to webapi.

Here my controllers

  public Task<HttpResponseMessage> Post()
        {
            if (!Request.Content.IsMimeMultipartContent("form-data"))
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }

            var uploadFolder = HostingEnvironment.MapPath("~/App_Sprites/UploadFolder");
            uploadFolder = Path.Combine(uploadFolder, DateTime.Now.ToString("yyyyMMddhhmmssfff"));
            Directory.CreateDirectory(uploadFolder);
            var streamProvider = new PreserveFilenameMultipartFileStreamProvider(uploadFolder);

            return Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith(t =>
            {
                foreach (var uploadedFile in Directory.GetFiles(uploadFolder))
                {
                    var thumbnail = Path.Combine(uploadFolder, "thumb-" + Path.GetFileName(uploadedFile));
                    var medium = Path.Combine(uploadFolder, "medium-" + Path.GetFileName(uploadedFile));
                    var large = Path.Combine(uploadFolder, "large-" + Path.GetFileName(uploadedFile));
                    ImageTools.Resize(uploadedFile, thumbnail, 80, 80);
                    ImageTools.Resize(uploadedFile, medium, 48, 48);
                    ImageTools.Resize(uploadedFile, large, 128, 128);
                }
                return Request.CreateResponse(HttpStatusCode.Accepted);
            });
        }
    }

and my class file

public class ImageTools
    {
        public static void Resize(string original, string output, int width, int height)
        {
            using (var image = Image.FromFile(original))
            using (var thumbnail = new Bitmap(width, height))
            using (var graphics = Graphics.FromImage(thumbnail))
            {
                graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
                graphics.SmoothingMode = SmoothingMode.HighQuality;
                graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
                graphics.CompositingQuality = CompositingQuality.HighQuality;

                graphics.DrawImage(image, 0, 0, width, height);

                ImageCodecInfo[] info = ImageCodecInfo.GetImageEncoders();
                EncoderParameters encoderParameters;
                encoderParameters = new EncoderParameters(1);
                encoderParameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L);
                thumbnail.Save(output, info[1], encoderParameters);
            }
        }
    }

and class file for save

public class PreserveFilenameMultipartFileStreamProvider : MultipartFileStreamProvider
        {
            public PreserveFilenameMultipartFileStreamProvider(string rootPath)
                : base(rootPath)
            {
            }

            public override string GetLocalFileName(HttpContentHeaders headers)
            {
                return headers.ContentDisposition.FileName.Replace("\"", "");
            }
        }

finally my layout page

@using (Html.BeginRouteForm("DefaultApi", new { httproute = "", controller = "Upload" }, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="image" multiple="multiple" accept="image/*" />
    <button type="submit">Upload</button>
}

Here I had the images in folder now I need to save those images as well. I need bind those in my layout page how could I do that?

score 0 · Answer 1 · answered Oct 05 '12 at 15:43

0

as of above question i have example sight that helps more follow and look for as above question to implement the coding for your implement

http://www.codeproject.com/Articles/379980/Fancy-ASP-NET-MVC-Image-Uploader?msg=4389108#xx4389108xx

answered Oct 05 '12 at 15:43

Sadda-shutu

1,309
2
18
42

score 0 · Answer 2 · answered Oct 11 '12 at 06:17

as of above question no problem i think it is increasing with quality option you just have to do simple just decrease the quality make upload image and check it once

 public static void Resize(string original, string output, int width, int height)
        {
            using (var image = Image.FromFile(original))
            using (var thumbnail = new Bitmap(width, height))
            using (var graphics = Graphics.FromImage(thumbnail))
            {
                graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
                graphics.SmoothingMode = SmoothingMode.HighQuality;
                graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
                graphics.CompositingQuality = CompositingQuality.HighQuality;

                graphics.DrawImage(image, 0, 0, width, height);

                ImageCodecInfo[] info = ImageCodecInfo.GetImageEncoders();
                EncoderParameters encoderParameters;
                encoderParameters = new EncoderParameters(1);
                encoderParameters.Param[0] = new EncoderParameter(Encoder.Quality, 80L);
                thumbnail.Save(output, info[1], encoderParameters);
            }
        }

How to make return the result of (need to bind image to view) webapi to getjson?

2 Answers2