Опубликован: 15.06.2011 | Доступ: свободный | Студентов: 708 / 59 | Оценка: 4.25 / 4.00 | Длительность: 14:09:00
Самостоятельная работа 7:

Web Matrix. Работа с изображениями. Добавление функции поиск

Изменение размеров изображения

1.Добавим к проекту новую страницу и назовем ее Thumbnail.cshtml

2.В папке image, создадим папку в которую будут помещаться уменьшенные версии изображений thumbs:


Рис. 12.12.

3.Изменим начальный код страницы Thumbnail.cshtml на:

@{  WebImage img = null;
    var newFileName = "";
    var imagePath = "";
    var imageThumbPath  = "";
     
    if(IsPost)
{
        img = WebImage.GetImageFromRequest();
        if(img != null)
   {
            newFileName = Path.GetFileName(img.FileName);
            imagePath = @"image\" + newFileName;
            img.Save(@"~\" + imagePath);
            imageThumbPath = @"image\thumbs\" + newFileName;
     img.Resize(width: 60, height: 60);
            img.Save(@"~\" + imageThumbPath);     
   }
 }
}

<!DOCTYPE html>
<html>
<head>
  <title>Resizing Image</title>
</head>
<body>
<h1>Thumbnail Image</h1>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Creating Thumbnail Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Submit" />
    </fieldset>
  </form>
    @if(imagePath != "")
     {
        <img src="@imageThumbPath" alt="Thumbnail image" />
        <a href="@imagePath" target="_Self">
        View full size
        </a>    
    }
</body>
</html>

Данный код похож на код из пункта "Загрузка изображений на сервер", отличается только тем, что изображение загружается дважды. В папку image помещается обычного размера изображение, в папку thumbs с помощью метода Resize, уменьшенная копия изображения (в нашем примере изображение размера 60x60 пикселей):

imageThumbPath = @"image\thumbs\" + newFileName;
 img.Resize(width: 60, height: 60);
 img.Save(@"~\" + imageThumbPath);

Отобразим уменьшенную версию изображения на страницу и разместим ссылку на изображение оригинального размера:

<img src="@imageThumbPath" alt="Thumbnail image" />
        <a href="@imagePath" target="_Self">
        View full size
        </a>

4.Запустим проект, выберем какое-нибудь изображение, и нажмем кнопку "Submit". Загруженное изображение в уменьшенном виде отобразиться в окне браузера:


Рис. 12.13.

Кликнем на ссылку "View full size". Браузер откроет новое окно с изображением исходного размера:


Рис. 12.14.