ASP.NET и .NET Framework делают задачу создания изображений на лету очень простой. В классическом ASP разработчики были вынуждены использовать сторонние компоненты, такие как ASPImage и ASPPicture, для динамической обработки изображений. К счастью, с ASP.NET эти дни прошли. Различные возможности манипулирования изображениями теперь встроены непосредственно в классы .NET Framework.
.NET Framework предлагает несколько классов для генерации и обработки изображений. Разработчики ASP.NET могут использовать эти классы для рисования различных фигур, создания текста и создания изображений во многих различных форматах, включая GIF, JPEG, PNG и т. Д.
Теперь о неизбежном вопросе: зачем вам на лету создавать изображения для ваших веб-страниц ASP.NET? Вот несколько практических применений динамической генерации изображений:
- Создать галерею миниатюр из ваших полноразмерных изображений галереи.
- Создавайте динамические диаграммы на основе динамического пользовательского ввода или данных базы данных.
- Создавайте изображения со случайным текстом (кодом доступа) для использования со страницами регистрации пользователей, чтобы предотвратить автоматическую регистрацию.
Создать текстовое изображение на лету
Давайте используем два класса .NET, расположенных в пространстве имен System.Drawing, чтобы проиллюстрировать, как создавать изображения на лету с ASP.NET. Двумя базовыми классами являются System.Drawing.Bitmap и System.Drawing.Graphics.
Чтобы продемонстрировать простое динамическое создание изображений ASP.NET, мы создадим веб-страницу ASP.NET с двумя раскрывающимися списками, одним текстовым полем и кнопкой. Первый выпадающий список позволяет нам выбрать цвет фона нашего изображения, а второй позволяет нам выбрать шрифт. Текстовое поле получит текст, который будет отображаться на изображении, а кнопка сгенерирует изображение. Вот код, который отображает эти элементы формы:
<form runat="server"> <asp:TextBox runat="server" id="Text" /> <br><br> <asp:dropdownlist runat="server" id="BackgroundColor"> <asp:ListItem Value="red">Red</asp:ListItem> <asp:ListItem Value="green">Green</asp:ListItem> <asp:ListItem Value="navy">Navy</asp:ListItem> <asp:ListItem Value="orange">Orange</asp:ListItem> </asp:dropdownlist> <asp:dropdownlist runat="server" id="Font"> <asp:ListItem Value="Arial">Arial</asp:ListItem> <asp:ListItem Value="Verdana">Verdana</asp:ListItem> <asp:ListItem Value="Courier">Courier</asp:ListItem> <asp:ListItem Value="Times New Roman">Times New Roman</asp:ListItem> </asp:dropdownlist> <br><br> <asp:Button runat="Server" id="SubmitButton" Text="Generate Image" /> </form> Каждый раз, когда вы запрашиваете страницу ASP.NET, на сервере запускается событие Page_Load и вызывается подпрограмма Page_Load . В рамках этой подпрограммы вы можете проверить, был ли запрос на страницу сгенерирован посредством обратной передачи данных (например, пользователь нажал на кнопку отправки), пришел ли пользователь на эту страницу с другой страницы, или был ли Пользователь просто набрал URL страницы в адресной строке браузера.
В этом примере важно знать, была ли страница опубликована обратно или нет, потому что мы хотим генерировать динамическое изображение только тогда, когда пользователь нажимает кнопку отправки, а не когда он впервые загружает страницу. Свойство Page.IsPostBack имеет значение true если страница APS.NET загружена в ответ на обратную передачу клиента; в противном случае это false . Поэтому первое, что мы делаем в подпрограмме Page_Load, это проверяем значение Page.IsPostBack :
If Page.IsPostBack Then
Если значение равно false , мы ничего не делаем, и на странице просто отображаются элементы управления ASP.NET, которые мы объявили выше. Если значение true , мы должны сгенерировать изображение. Вот как это делается.
Первым шагом в создании нашего динамически генерируемого изображения является создание нового объекта Bitmap и указание ширины и высоты генерируемого изображения:
Dim oBitmap As Bitmap = New Bitmap(468, 60)
Следующим шагом является создание нового объекта Graphics , который позволит нам рисовать на нашем растровом изображении:
Dim oGraphic As Graphics = Graphics.FromImage(oBitmap)
Затем мы объявляем структуру типа System.Drawing.Color (представляет цвет RGB), которая будет определять цвет фона нашего динамического изображения:
Dim oColor As System.Drawing.Color
Теперь нам нужно получить значения, которые были отправлены обратно на страницу, из двух выпадающих окон и текстового поля:
Dim sColor As String = Request("BackgroundColor") Dim sText As String = Request("Text") Dim sFont As String = Request("Font")
Мы запускаем оператор Select Case, чтобы установить значение oColor (цвет фона нашего изображения), в зависимости от значения sColor :
Select Case sColor Case "red" oColor = Color.Red Case "green" oColor = Color.Green Case "navy" oColor = Color.Navy Case "orange" oColor = Color.Orange Case Else oColor = Color.Gray End Select
Далее мы создаем две кисти, которые помогут нам нарисовать наше изображение. Первый, oBrush , будет использован для рисования фона изображения:
Dim oBrush As New SolidBrush(oColor)
Вторая кисть будет использоваться для рисования текста, введенного пользователем; мы жестко кодируем цвет кисти как белый:
Dim oBrushWrite As New SolidBrush(Color.White)
Мы будем использовать первую кисть, чтобы заполнить прямоугольник изображения, потому что цвет новых растровых изображений по умолчанию черный. Мы вызываем метод oGraphic для oGraphic чтобы закрасить фон цветом, выбранным пользователем (oColor):
oGraphic.FillRectangle(oBrush, 0, 0, 468, 60)
Пока что мы изменили цвет фона нашего изображения, но мы не написали никакого текста. Мы будем использовать метод oGraphic объекта oGraphic для этого. Метод DrawString имеет несколько перегрузок. Это то, что мы собираемся использовать:
DrawString(String, Font, Brush, FPoint)
Первый параметр — это просто строка, которую мы хотим записать; второй параметр определяет шрифт, который будет использоваться; третий параметр определяет кисть (это будет вторая кисть, которую мы создали выше); последний параметр определяет начальную точку рисования относительно верхнего левого угла нашего изображения. Однако перед вызовом метода DrawString нам необходимо создать экземпляр класса Font и структуру FPoint , определяющую точку, с которой должен начинаться рисунок.
Пользователь выбрал шрифт для текста, поэтому мы передаем sFont в качестве первого параметра и жестко sFont второй параметр, который определяет размер шрифта:
Dim oFont As New Font(sFont, 13)
Затем мы определяем структуру типа PointF , которая представляет упорядоченную пару координат X и Y, которые определяют точку в двумерной плоскости. Опять же, мы просто жестко задаем начальную точку рисования для текста, потому что это не настраивается в нашем примере:
Dim oPoint As New PointF(5F, 5F)
Теперь мы можем вызвать метод DrawString и нарисовать наш текст:
oGraphic.DrawString(sText, oFont, oBrushWrite, oPoint)
Последнее, что осталось сделать, это сохранить вновь созданный образ на сервере:
oBitmap.Save(Server.MapPath("generated_image.jpg"), ImageFormat.Jpeg)
Этот код сохраняет изображение в формате JPEG, но вы можете сохранить его как GIF, TIFF, PNG или любой другой популярный формат изображения.
Наконец, мы показываем ссылку на наше новое изображение:
Response.Write("View the generated image <a target=""_blank"" href=""generated_image.jpg"">here</a>")
Если вы не хотите сохранять изображение в файловой системе сервера, вы можете отправить его прямо в браузер, используя следующий код:
Response.ContentType = "image/jpeg" oBitmap.Save (Response.OutputStream, ImageFormat.Jpeg)
Фактически вы можете разместить код, который генерирует динамическое изображение, на отдельной странице ASP.NET и ссылаться на эту страницу из других страниц ASP.NET, например:
<img src="image_generate.aspx">
Разумеется, ваша страница image_generate.aspx должна иметь правильный образ ContentType, например:
Response.ContentType = "image/jpeg"
Или:
Response.ContentType = "image/gif"
Вы можете найти полный исходный код этой страницы в конце этой статьи.
Создать миниатюру на лету
Давайте теперь посмотрим на изображения, проходя процесс динамического создания миниатюр в ASP.NET.
Сначала мы создадим страницу ASP.NET с именем thumbnail.aspx и импортируем классы System.Drawing и System.Drawing.Imaging:
<%@ Import Namespace="System.Drawing" %> <%@ Import Namespace="System.Drawing.Imaging" %>
Страница thumbnail.aspx получит 3 параметра в строке запроса:
-
image— путь к файлу изображения, размер которого будет изменен на миниатюру -
w— желаемая ширина миниатюры -
h— желаемая высота миниатюры
В подпрограмме Page_Load мы объявляем 2 объекта System.Drawing.Image — oImage и oThumbnail . Затем мы получаем абсолютный путь к файлу изображения со следующей строкой:
sImagePath = Server.MapPath(Request.QueryString("image"))
Примечание: помните о последствиях безопасности здесь. Передав хитрый параметр изображения в строку запроса, хакер может убедить сценарий попытаться получить доступ и отобразить любой файл на сервере, независимо от того, является ли он частью вашего веб-сайта или нет. Чтобы избежать этого, вы должны убедиться, что разрешения вашей файловой системы были правильно настроены; Кроме того, некоторая логика проверки для параметра не будет сбиваться с пути в этом сценарии. Однако для целей этой статьи мы будем придерживаться этого наивного подхода.
На следующем шаге мы фактически создаем объект oImage, используя метод FromFile и передавая абсолютный путь к файлу, который мы получили на предыдущем шаге.
oImage = oImage.FromFile(sImagePath)
Затем мы получаем желаемую ширину и высоту миниатюры:
iWidth = Request.QueryString("w") iHeight = Request.QueryString("h")
Следующим шагом является использование GetThumbnailImage method , который получает уменьшенное изображение из объекта Image:
oThumbnail = oImage.GetThumbnailImage(iWidth, iHeight, Nothing, Nothing)
Мы передаем ширину и высоту миниатюры в качестве первых двух параметров. Для этой статьи достаточно передать Nothing как третий и четвертый параметры метода GetThumbnailImage без каких-либо дополнительных пояснений.
Наконец, как и в предыдущем примере, мы напрямую отправляем изображение в браузер, используя следующий код:
Response.ContentType = "image/jpeg" oThumbnail.Save (Response.OutputStream, ImageFormat.Jpeg)
Это было так просто!
Полнофункциональный исходный код VB.NET обоих примеров можно скачать здесь .