Создание эскизов с помощью ASP.NET MVC – iFour Technolab

Что такое эскиз?

Эскиз – это изображение с уменьшенным размером файла реального изображения, которое используется при загрузке изображения.

Почему мы используем эскизы?

Основное преимущество уменьшенного изображения заключается в уменьшении размера файла при использовании уменьшенного изображения для более быстрой загрузки веб-сайтов по сравнению с оригинальным изображением. Если пользователь хочет показать оригинальное изображение, щелкнув по уменьшенному изображению.

Используя миниатюры, сайт предоставляет пользователю или посетителю много мгновенного контента, не требуя дополнительного времени для загрузки.

С помощью миниатюрных изображений мы отображаем больший объем контента на небольшом пространстве.

Когда полезны миниатюры?

Миниатюрные изображения могут использоваться в Интернете повсеместно. Например, YouTube использует миниатюры, поиск изображений google, Pinterest используют миниатюры. Все сайты интернет-магазинов используют уменьшенное изображение для отображения большего количества товаров и более быстрой их загрузки. При нажатии на миниатюру отображается оригинальное изображение.

Некоторые примеры миниатюр

Наша компьютерная система использует миниатюры изображений, когда мы открываем папку с изображениями, то видим, что размер изображения уменьшается и отображается больше изображений по сравнению с оригинальными, а также требуется меньше времени для загрузки всех изображений в папке с изображениями.

Amazon использует эскизы изображений для отображения своих товаров. Он отображает миниатюры в списке всех товаров, когда пользователь нажимает на миниатюру, отображается оригинальное изображение.

Создание изображений миниатюр

В этом примере я покажу вам, как создать миниатюру при загрузке изображения в базу данных с помощью MVC. При создании миниатюры изображения мы уменьшаем размер файла изображения, а затем исходного изображения.

Я буду использовать подход “код-первый” для реализации миниатюр изображений. В подходе “код-первый” мы должны создать модальное окно для загрузки изображения.

Вы можете добавить модель в наше решение Models -> Add -> Ado.Net Entity Data model

Код модели:

public class ImageUpload
{
     [Key]
         public int  Image_Id
        {
            get;
            set;
          }
         [Required]
         public string Image_Path
         {
            get;
            set;
         }
 }

Читать далее: Что такое коллекция форм и как ее реализовать в Asp .NET Mvc?

Это создаст контекстный файл для подключения к базе данных. Теперь вы можете добавить свою модель в контекстный файл, как показано ниже.

public class thumbnails: DbContext
{ 
    public thumbnails() : base("name=thumbnails")
    {
    }
    public virtual DbSet<imageupload> ImageUploads { get; set; }
}
</imageupload>

Теперь вам нужно выполнить команду Migration внутри элемента управления менеджера пакетов

Create New Controller и затем создать метод ThumbnailImage внутри нового контроллера.

public ActionResult ThumbnailImage(ImageUpload imageUpload, HttpPostedFileBase file)
        {
            thumbnails db = new thumbnails();
            try
            {
                if (file != null)
                {
                    ImageUpload image = new ImageUpload();
                    var fileName = Path.GetFileName(file.FileName);
                    var thumbName = fileName.Split('.').ElementAt(0) + "_thumb." + fileName.Split('.').ElementAt(1);
                    fileName = Path.Combine(Server.MapPath("/Images"), fileName);
                    thumbName = Path.Combine(Server.MapPath("/Images"), thumbName);
                    image.Iamge_Path = fileName;
                    db.ImageUploads.Add(image);
                    file.SaveAs(fileName);
                    Image img = Image.FromFile(fileName);
                    int imgHeight = 150;
                    int imgWidth = 150;
                    if (img.Width < img.Height)
                    {
                        //portrait image  
                        imgHeight = 150;
                        var imgRatio = (float)imgHeight / (float)img.Height;
                        imgWidth = Convert.ToInt32(img.Height * imgRatio);
                    }
                    else if (img.Height < img.Width)
                    {
                        //landscape image  
                        imgWidth = 150;
                        var imgRatio = (float)imgWidth / (float)img.Width;
                        imgHeight = Convert.ToInt32(img.Height * imgRatio);
                    }
                    Image thumb = img.GetThumbnailImage(imgWidth, imgHeight, () => false, IntPtr.Zero);
                    thumb.Save(thumbName);
                }
                return View();
            }
            catch (Exception ex)
            {
                ViewBag.Message = ex.Message.ToString();
                return View();
            }
        }

В этот метод я передал два параметра, первый – имя нашей модели ImageUpload, а второй – HttpPostedFileBase.

HttpPostedFileBase – это абстрактный класс, члены которого аналогичны HttpPostedFile. HttpPostedFileBase позволяет вам настраивать его в соответствии с вашими потребностями.

Нам нужно предоставить объект подключения к базе данных. Чтобы подключить нашу таблицу данных, нам нужно создать ее собственный объект.

Через метод ThumbnailImage () мы просматриваем портретное или альбомное изображение. Максимальная высота или ширина составляет 150 пикселей, поэтому мы получаем изображение длиной и шириной 150 пикселей в пределах формы.

Asp.Net предоставляет метод GetThumbnailImage () для создания уменьшенного изображения. Принимает новые значения ширины, высоты, сообщение GetThumbnailImageAbort и параметр System.IntPtr.Zero. Эта функция возвращает изображение типа объекта.

Функция “Сохранить ()” используется для сохранения файла иконки в любую определенную папку. При сохранении иконки используется реальное имя файла с суффиксом “_thumb”, и иконка будет храниться в той же папке, где мы сохранили изображение, поэтому я использую суффикс для уменьшенного изображения, чтобы мы могли легко идентифицировать уменьшенное изображение. Если вы используете две отдельные папки для хранения фактического и уменьшенного изображения, в этом случае суффикс не требуется.

Ищете надежную компанию по разработке Dot Net? Ваш поиск закончится здесь.

Если вы хотите хранить миниатюры в другой папке, вы можете изменить этот код. Здесь я изменил папку Image на ThumbImg.

thumbName = Path.Combine(Server.MapPath("/ThumbImg"), fileName);

Вот мой код представления, и я создал форму захвата изображения в базе данных.

Внутри Html.BeginForm() нам нужно передать имя нашего метода и имя контроллера с методом post и обеспечить новый { enctype = “multipart/form-data” } Это необходимо, когда мы используем метод post, чтобы мы могли отправить наши данные в кодировке.

<xmp>
@model ImageThumbnails.Models.ImageUpload
@{
    ViewBag.Title = &quot;ThumbnailImage&quot;;
}<h2>ThumbnailImage</h2>
@using (Html.BeginForm(&quot;ThumbnailImage&quot;, &quot;thumbnail&quot;, null, FormMethod.Post, new { enctype = &quot;multipart/form-data&quot; }))
{
    @Html.AntiForgeryToken()
<div class="form-horizontal"><h4>ImageUpload</h4>
<hr /><div class="form-group">
            @Html.LabelFor(model => model.Image_Path, htmlAttributes: new { @class = &quot;control-label col-md-2&quot; })<div class="col-md-10">
                <input class="form-control" name="image" required="" type="file" /></div></div>
<div class="form-group"><div class="col-md-offset-2 col-md-10">
                <input class="btn btn-info" type="submit" value="Upload" /></div></div></div>
}
<div>
    @Html.ActionLink(&quot;Back to List&quot;, &quot;Index&quot;)</div>
@section Scripts {
    @Scripts.Render(&quot;~/bundles/jqueryval&quot;)
}
</xmp>

Теперь запустите код, и вы получите следующий результат. Когда мы загрузим оригинальное изображение, мы вставим его в наше проектное решение в папку Image и сохраним уменьшенное изображение в той же папке, потому что мы используем одну и ту же папку для хранения обоих изображений. Вам необходимо создать папку Image внутри вашего проектного решения для хранения изображений.

Заключение

С помощью эскизов изображений мы можем отображать больше изображений в ограниченном пространстве. Эскизы экономят место и занимают меньше времени при загрузке изображения. Если мы используем оригинальное изображение для отображения на сайте, загрузка сайта займет больше времени, потому что его размер очень большой, чем у уменьшенного изображения.