Был сегодня на форумах такой вопрос. Нужно было реализовать подобный функционал для одного сайта, где картинка собирается из текстовых данных введённых пользователем и показывается ему сразу же, после малейших изменений. Очень часто возникает необходимость
реализовать подобное, и не для одного случая. Ниже я покажу самый базовый пример, остальное уже дело времени и техники, а поскольку вопрос снова касался ASP.NET WebForms, то пример покажу для веб-форм, для MVC реализовать ещё проще. И так, создаём пустое приложение ASP.NET WebForms, и добавляем туда следующую форму.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="GetImage.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="TextBox" type="text" value="" oninput="TextChange();" />
<asp:Image ID="PrintImage" runat="server" ClientIDMode="Static" ImageUrl="" />
</div>
</form>
<script type="text/javascript">
function TextChange() {
var name = $("#TextBox").val();
$("#PrintImage").attr("src",
'<%=Page.ResolveUrl("~/ImageHandler.ashx?name=" )%>' + name);
}
</script>
</body>
</html> А генеривать на сервере изображение нам будет стандартный обработчик (в MVC можно было бы обойтись обычным контроллером). Добавим в проект файл ImageHandler.ashx со следйющим кодом.
namespace GetImage
{
public class ImageHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//Получаем текст из поля как параметр строки запроса.
string name = context.Request.QueryString["name"];
//Создаём изображение.
Bitmap image = new Bitmap(300, 100);
//Используем GDI+ для рисования.
Graphics graphics = Graphics.FromImage(image);
Font font = new Font("Impact", 20, FontStyle.Regular);
//Рисуем наш текст.
graphics.DrawString(name, font, Brushes.Blue, 10, 5);
context.Response.ContentType = "image/jpeg";
//Сохраняем рисунок в контекст запроса и передаём клиенту.
image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
public bool IsReusable
{
get
{
return false;
}
}
}
} Всё, теперь при изменении каждой буквы в текстовом поле, пойдут GET запросы на сервер и он будет отсылать нам новое изображение каждый раз. А что он будет посылать, уже зависит от конкретно поставленной задачи. Как видно, всё очень просто.
