在C＃中显示缩略图

Question

I am working on an album viewer using C#. As part of the application, I need to have all the images of the selected folder to be displayed as thumbnails. I dont know how to create the thumbnails.

Any code or links or suggestions to accomplish the functionality would be really helpful. Thank You.

Answer 1

public System.Drawing.Image GetThumbnailImage(int thumbWidth, int thumbHeight, System.Drawing.Image.GetThumbnailImageAbort callback, System.IntPtr callbackData)
    Member of System.Drawing.Image

Summary:
Returns a thumbnail for this System.Drawing.Image.

Parameters:
thumbWidth: The width, in pixels, of the requested thumbnail image.
thumbHeight: The height, in pixels, of the requested thumbnail image.
callback: A System.Drawing.Image.GetThumbnailImageAbort delegate. In GDI+ version 1.0, the delegate is not used. Even so, you must create a delegate and pass a reference to that delegate in this parameter.
callbackData: Must be System.IntPtr.Zero.

Returns:
An System.Drawing.Image that represents the thumbnail.

Answer 2

[HttpPost]
    public PartialViewResult DisplayGalleryThumbs(string galleryId)
    {
        int pageNumber = Convert.ToInt32(galleryId.Split('_')[2]);
        Guid feedId = new Guid(galleryId.Split('_')[1]);
        var images = _feedDomain.ShowPostById(feedId.ToString()).Images;

        int totalNumberOfPages = CountNumberOfPages(images);

        string action = galleryId.Split('_')[3];

        var dict = new Dictionary<int, List<FeedImage>>();
        var pagedImages = new List<FeedImage>();
        int i = 1;
        int a = 1;
        foreach (FeedImage image in images)
        {
            pagedImages.Add(image);
            if (i % NumberOfImagesPerPage == 0)
            {
                dict.Add(a, pagedImages);
                a++;
                pagedImages=new List<FeedImage>();
            }
            if (i >= images.Count()) dict.Add(a, pagedImages);
            i++;
        }
        if (action=="next")
        {
            pageNumber += 1;
        }
        else
        {
            pageNumber -= 1;
        }


        var galleryModel = new FeedThumbGalleryModel
                               {
                                   Images = dict.FirstOrDefault(c => c.Key == pageNumber).Value,
                                   FeedId = feedId,
                                   PageNumber = pageNumber,
                                   NumberOfPages = totalNumberOfPages,
                                   NumberOfImagesPerPage = NumberOfImagesPerPage,
                                   TotalNumberOfImages = images.Count()
                               };

        return PartialView("~/Views/Feed/_DisplayGalleryThumbs.cshtml", galleryModel);
    }




@helper Render(FeedThumbGalleryModel model)

{

if (model.Images != null)
{

    string linkNext = "linkNext_" + model.FeedId + "_" + model.PageNumber + "_next";
    string linkPrev = "linkPrev_" + model.FeedId + "_" + model.PageNumber + "_prev";

    string thumbFeedId = "feedThumbDiv_" + model.FeedId;
    <div id="@thumbFeedId">
        <table>
            <tr>
                <td style="width: 30px;vertical-align: top;">
                    @if (model.NumberOfPages > 1)
                    {
                        if (model.PageNumber <= model.NumberOfPages && model.PageNumber > 1 || model.PageNumber == model.NumberOfPages)
                        {
                            <a class="page-action" href="#" id="@linkPrev">Prev</a>
                        }  
                    }
                </td>
                <td style="width: 120px;vertical-align: top">
                    @if (model.NumberOfPages>1)
                    {
                         for (int a = 1; a <= model.NumberOfPages; a++)
                         {
                             int currentPage = a - 1;
                             string pageLink = "linkNext_" + model.FeedId + "_" + currentPage + "_next";
                             string classname = a==model.PageNumber ? "page-number-list" : "page-number-list1";

                             <a href="#" id="@pageLink" class="@classname">@a</a>
                        }
                    }

                </td>
                <td style="width: 220px;vertical-align: top;">
                        @if (model.PageNumber < model.NumberOfPages)
                        {
                            <a class="page-action" href="#" id="@linkNext">Next</a>
                        }
                </td>
                <td style="width: 150px;vertical-align: top;">
                    @{var thisId = "SeeAll_" + model.FeedId;}
                    @if (model.TotalNumberOfImages > 12)
                    {
                        <a id="@thisId" class="view-all">View All</a>
                    }

                </td>
                <td style="vertical-align: top">
                    <div class="number-of-images">
                       @model.TotalNumberOfImages images  
                    </div>

                </td>
            </tr>

            <tr>
                <td colspan="5">
                    <div style="width: 660px;padding-top: 10px">
                        @{int i = 1;}
                        @foreach (FeedImage m in model.Images)
                        {
                            string thumbThumb = ConfigurationManager.AppSettings["DisplayThumbPath"] + m.ImageId;
                            string imageUrl = "/feed/DisplayImage/" + model.FeedId + "_" + m.ImageId;

                            <div class="thumbnail image">
                                <a class='show-image' href="@imageUrl">
                                    <img border="0" class="image"  src="@thumbThumb" width="125" height="125" alt="" />
                                </a>
                            </div>

                            if (i % model.NumberOfImagesPerPage == 0)
                            {
                                break;
                            }
                            i++;
                        }
                        <br/>
                    </div>
                </td>

            </tr>
        </table>


    </div>

}

}

public class FeedImage
{

    public Guid ImageId { get; set; }
    public string ImageUrl { get; set; }
    public string ImageName { get; set; }
    public double ImageSize { get; set; }
    public string FileExtension { get; set; }
    public string ImageType { get; set; }
    public FeedPost Post { get; set; }
    public List<FeedLike> Likes { get; set; }
    public List<FeedComment> Comments { get; set; }
    public DateTime DateCreated { get; set; }
    public string DateCreatedIso8601 { get; set; }
}

private int CountNumberOfPages(List<FeedImage> images)
    {
        if (images == null) return 0;

        return (images.Count() + NumberOfImagesPerPage - 1) / NumberOfImagesPerPage;
    }

$("[class='page-action']").live('click', function () {
    var feedArr = $(this).attr('id').split('_');
    var thisDivId = '#feedThumbDiv_' + feedArr[1];

    $.post('/Feed/DisplayGalleryThumbs', { galleryId: $(this).attr('id') },
            function (html) {
                $(thisDivId).replaceWith(html);
            });
    return false;
});

This is an ajax solution for thumbnail paging preview using MVC3. Im using this for my news feed to list through image gallery. Dont mind heavy use of tables in the view, my UI is a bit limited.

Answer 3

check this article . It may will help you... The code creates an Image object from the image supplied in the textbox. Using the Image.GetThumbnailImage(), the code then creates a thumbnail image with a size of 100*100.

Answer 4

I suggest to you a way I used in the past: Use a ListView and dynamically load the images in the associated ImageList. You can load the image in a thumbnailized form by using the strategy proposed by rdkleine. The important principle you have to follow is don't load all images if the user can't really see them. Using a listview you achieve this by setting VirtualMode = true and feed the image only when it is actually displayed.