Створення динамічних зображень в ASP .NET за допомогою GDI+.

Доброго дня! Сьогодні я продемонструю малювання зображень за допомогою класів з .NET Framework, які використовують GDI+. В кінці статті покажу як можна застосувати отримані знання для побудови динамічних зображень в технології ASP .NET.

В цьому прикладі ми будемо використовувати класи Bitmap, Graphics та інші допоміжні класи з простору імен System.Drawing та System.Drawing.Imaging. Перший клас представляє собою зображення в пам’яті, яке ви можете створити задавши розмір, або завантажити з файлу.

Створіть звичайний ASP .NET проект в Visual Studio. Відкрийте файл Default.cs та добавте простори імен System.Drawing та System.Drawing.Imaging:

1 using System; 2 using System.Drawing; 3 using System.Drawing.Imaging; 4 5 namespace ASP.NET_DynamicImageCreation 6 { 7 public partial class _Default : System.Web.UI.Page 8 { 9 protected void Page_Load(object sender, EventArgs e) 10 { 11 12 } 13 } 14 } 15

В методі Page_Load добавте наступний код:

1 Bitmap image = new Bitmap(500, 500); 2 using (Graphics graphic = Graphics.FromImage(image)) 3 { 4 5 } 6

 

Тут я створив екземпляр класу Bitmap, в конструктор якого передав розмір 500 на 500 пікселів.

Для того щоб малювати по цьому зображенні, потрібно отримати екземпляр класу Graphics, який зможе це все робити. Робиться це за допомогою виклику статичного методу FromImage, в який передається зображення для обробки.

Для початку ознайомтесь з методами класу Graphics, які дозволяють малювати ту чи іншу фігуру. Вони мають префікс Draw.

Отже тепер можна приступити до малювання Smile. Спочатку намалюємо звичайний квадрат:

1 protected void Page_Load(object sender, EventArgs e) 2 { 3 Bitmap image = new Bitmap(500, 500); 4 using (Graphics graphic = Graphics.FromImage(image)) 5 { 6 graphic.DrawRectangle(Pens.Black, new Rectangle(0, 0, 200, 200)); 7 image.Save(Response.OutputStream, ImageFormat.Png); 8 } 9 } 10

В цьому коді малюється квадрат в координатах x=0, y=0 з розміром 200х200 пікселів. Зверніть увагу на те, що картинка зберігається в вихідний потік екземпляру HttpResponse, який знаходиться в властивості OutputStream.

Якщо ви скомпілюєте проект та зайдете на сторінку, ви побачите ось такий результат:

clip_image001

Мал. 1.1

Для прикладу можна намалювати ще якесь коло:

1 protected void Page_Load(object sender, EventArgs e) 2 { 3 Bitmap image = new Bitmap(500, 500); 4 using (Graphics graphic = Graphics.FromImage(image)) 5 { 6 graphic.DrawRectangle(Pens.Black, new Rectangle(0, 0, 200, 200)); 7 graphic.DrawEllipse(Pens.Black, new Rectangle(50, 50, 100, 100)); 8 9 image.Save(Response.OutputStream, ImageFormat.Png); 10 } 11 } 12

Результат буде наступним:

clip_image002

Мал. 1.2

Тепер домалюємо якийсь текст:

1 protected void Page_Load(object sender, EventArgs e) 2 { 3 Bitmap image = new Bitmap(500, 500); 4 using (Graphics graphic = Graphics.FromImage(image)) 5 { 6 graphic.DrawRectangle(Pens.Black, new Rectangle(0, 0, 200, 200)); 7 graphic.DrawEllipse(Pens.Black, new Rectangle(50, 50, 100, 100)); 8 graphic.DrawString("Hello", new Font("Arial", 12), Brushes.Black, 80, 90); 9 image.Save(Response.OutputStream, ImageFormat.Png); 10 } 11 } 12

В результаті отримаємо ось таке зображення:

clip_image003

Мал. 1.3

Отже, тепер можна застосувати отримані знання для побудови зображення з підписом сайту.

Створіть Http Хендлер:

Відкрийте контекстне меню проекту та виберіть Add -> New Item:

clip_image004

Мал. 1.4

Виберіть шаблон GenericHandler, назвіть його SiteSignatureHandler.ashx та натисніть OK:

1.5

Мал. 1.5

 

Тепер добавте в проект папку Images і в неї добавте якусь картинку з назвою 1.jpg:

clip_image007

Мал. 1.6

Відкрийте файлу з кодом хендлера та вставте такий код:

1 using System.Web; 2 using System.Drawing; 3 using System.Drawing.Imaging; 4 using System.IO; 5 6 namespace ASP.NET_DynamicImageCreation 7 { 8 9 public class SiteSignatureHandler : IHttpHandler 10 { 11 12 public void ProcessRequest(HttpContext context) 13 { 14 string siteName = "GDI+ Sample"; 15 string imageName = context.Request["img"]; 16 string imagesSubdir = "Images"; 17 string imagePath = Path.Combine(imagesSubdir, imageName); 18 imagePath = context.Server.MapPath(imagePath); 19 20 int fontSize = 25; 21 int padding = 10; 22 23 Bitmap image = new Bitmap(imagePath); 24 using (Graphics graphic = Graphics.FromImage(image)) 25 { 26 Point stringPosition = new Point(); 27 stringPosition.X = image.Width - (siteName.Length * fontSize); 28 stringPosition.Y = image.Height - fontSize - padding; 29 30 graphic.DrawString(siteName, new Font("Arial", fontSize), Brushes.White, stringPosition.X, stringPosition.Y); 31 image.Save(context.Response.OutputStream, ImageFormat.Png); 32 } 33 } 34 public bool IsReusable 35 { 36 get 37 { 38 return false; 39 } 40 } 41 } 42 } 43

Цей хендлер приймає назву картинки, яка передається у форматі GET запиту через параметр img. Наприклад: SiteSignatureHandler.ashx?img=1.jpg

 

Далі код формує цілий шлях до цієї картинки, завантажує її в пам’ять та у правому нижньому куту домальовує стрічку, яка ідентифікує назву сайту.

Щоб використати цю функціональність, добавте в файл Default.aspx такий елемент:

1 <asp:Image ID="img" runat="server" ImageUrl="SiteSignatureHandler.ashx?img=1.jpg" />

Обов’язково закоментуйте попередній код з файлу Default.cs, після чого запустіть сайт:

1.7

Мал 1.7

Як ви бачите, внизу картинки був добавлений текст, який ідентифікує назву сайту.

Хенлдер можна розширити таким чином, що він буде приймати текст, який потрібно відмалювати на зображенні. Також можна зробити модифікацію, яка буде накладати інше зображення, наприклад логотип вашого сайту. Нагадую, що це все можна отримати за допомогою класу Graphics.

Скачати приклад програми

Тепер в вас має бути більше розуміння про малювання графіки за допомогою GDI+ та використання цієї технології у ваших веб-сайтах. При виникненні запитань обов’язково залишайте коментар. Всього найкращого!

Advertisements

, , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: