Передача большого объема данных на aspx-сайт и получение обратно изображения

#c# #asp.net #image #postback

#c# #asp.net #изображение #обратная передача

Вопрос:

Я новичок в ASP.net программирование и веб-программирование в целом, поэтому я не знаю всех терминов, но я постараюсь сделать все возможное, чтобы донести суть.

Я пишу генератор изображений, который будет принимать строку и выводить PNG. Я смог успешно сделать это, используя синтаксис LabelGenerator.aspx?epl2=UrlEncodedMessageGoesHere посещение этого сайта сгенерирует PNG-файл, который можно использовать прямо внутри веб-страницы для дальнейшего отображения. Однако проблема в том, что у меня может быть сообщение размером более 2048 байт, и IIS это не нравится.

Я знаю, что выполнение POST вместо GET освободит меня от ограничения 2048, однако я не знаю, как передать эту информацию, если я хочу использовать результирующее изображение внутри тега IMG.

вот некоторый код того, как я сейчас это делаю.

 public partial class LabelGenerator : System.Web.UI.Page
{
    RotateFlipType RotateFlip;
    float Scale;
    String LabelCommands;
    protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            int rotateFlipInt;
            if (!float.TryParse(this.Request.QueryString["Scale"], out Scale))
                Scale = 1;
            if (!int.TryParse(this.Request.QueryString["RotateFlip"], out rotateFlipInt))
                rotateFlipInt = (int)RotateFlipType.Rotate270FlipNone;
            RotateFlip = (RotateFlipType)rotateFlipInt;
            LabelCommands = this.Request.QueryString["epl2"];

            if (LabelCommands != null amp;amp; LabelCommands.Length > 0)
            {
                using (var bitmap = GenerateLabel())
                {
                    Response.ClearContent();
                    Response.ClearHeaders();
                    Response.ContentType = "image/png";
                    bitmap.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png);
                }

            }
            else
            {
                Response.Write("You did not enter a valid epl2 command");
            }
        }
        catch (Exception ex)
        {
            Response.Write("An error occurred during processing.");
        }

    }
    private Bitmap GenerateLabel()
    {
         //(snip)
    }
}
  

Ответ №1:

Взгляните на решения, которые Google использовал для своего Chart API для решения той же проблемы

Указание вашей диаграммы в качестве URL в вашем браузере или тега называется запросом GET. Выполнение запроса GET просто, но URL-адреса GET ограничены 2 Тыс. символов. Что, если у вас больше данных, чем это? К счастью, Chart API поддерживает HTTP POST для запросов к диаграммам длиной до 16 КБ. Компромисс заключается в дополнительной сложности использования POST.

В основном они создают форму на странице со скрытыми полями, которые содержат данные для отправки. При отправке этой формы изнутри IFRAME ответом является изображение. Их форма выглядит примерно так

 <form action='https://chart.googleapis.com/chart' method='POST'>
  <input type="hidden" name="cht" value="lc"  />
  <input type="hidden" name="chtt" value="This is | my chart"  />
  <input type='hidden' name='chs' value='600x200' />
  <input type="hidden" name="chxt" value="x,y" />
  <input type='hidden' name='chd' value='t:40,20,50,20,100'/>
  <input type="submit"  />
</form>
  

В этом примере пользователю необходимо нажать кнопку отправить, чтобы получить изображение. На странице Google есть еще один пример использования javascript для запуска POST

 var frm = document.getElementById('post_form');
if (frm) { frm.submit(); }
  

Комментарии:

1. Решение iframe идеально подходит для того, что мне нужно сделать.

Ответ №2:

Вот краткий пример, который я взломал, который использует jQuery для создания асинхронной записи для извлечения изображения в кодировке base64. Не уверен в совместимости с браузером.

 <div id="result"></div>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $.post('Image.aspx', { Mood: "Happy" }, function (data) {
            $('#result').html(data);
        });
    });
</script>
  

 protected void Page_Load(object sender, EventArgs e)
{
    byte[] image;
    Response.ClearContent();
    Response.ClearHeaders();
    switch (Request.Form["Mood"])
    {
        case "Happy":
            image = System.IO.File.ReadAllBytes(Server.MapPath("ImageHappy.png"));
            Response.Write("<img src="data:image/png;base64,"   Convert.ToBase64String(image)   "" />");
            break;
        case "Sad":
            image = System.IO.File.ReadAllBytes(Server.MapPath("ImageSad.png"));
            Response.Write("<img src="data:image/png;base64,"   Convert.ToBase64String(image)   "" />");
            break;
    }
    Response.Flush();
    Response.Close();
}
  

Ответ №3:

Если вы хотите использовать его в теге img, я полагаю, вам сначала нужно сохранить его на диске / сервере. Затем используйте атрибут src тега img, чтобы ссылаться на него с помощью веб-ссылки.

<img src="images/image.png"> будет работать нормально, если у вас есть каталог вне текущего каталога с именем images.

Или

<img src="http://yourdomain.com/images/image.png"> если вы хотите указать точный маршрут к изображению.

Комментарии:

1. @Скотт Чемберлен на самом деле хорошо справляется с этой задачей. Сохранение растрового изображения непосредственно в поток позволяет избежать необходимости сначала сохранять его на диск

2. @Ron Harlev итак, какую информацию он тогда хочет передать в тег img?

3. Что я могу сделать, чтобы обойти ограничение в 2 кб для запроса изображения.

4. @Скотт Чемберлен — Сначала зашифруйте / сожмите строку, а затем отмените ее в своем коде перед обработкой.

5. Также почему вы не можете использовать поле формы, подобное текстовому полю?