Web Matrix. Работа с изображениями. Добавление функции поиск
Изменение размеров изображения
1.Добавим к проекту новую страницу и назовем ее Thumbnail.cshtml
2.В папке image, создадим папку в которую будут помещаться уменьшенные версии изображений thumbs:
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". Загруженное изображение в уменьшенном виде отобразиться в окне браузера:
Кликнем на ссылку "View full size". Браузер откроет новое окно с изображением исходного размера:
