Добавление текста к изображению и отображение на той же странице

Question

Это мой первый раз, когда я работаю над изображениями, и я застрял !!

В настоящее время я работаю над одной страницей aspx, где мне нужно выполнить следующие требования ...

1. Пользователь может загрузить фотографию, используя элемент управления загрузкой файлов.
2. Редактировать фотографию, добавив в нее текст и т. Д. ...
3. Показать новое изображение на той же странице.

На данный момент я могу получить изображение из загрузчика и отображения файла ... Я также могу редактировать изображение ... но я не знаю, как отобразить его на той же странице...

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

Это будет так называемый переход на другую страницу ...

Пожалуйста, помогите!:(: (

внизу есть страница ...

<div id="page">
 <asp:Panel ID="pnlUpload" runat="server">
   <asp:FileUpload ID="Upload" runat="server" />
   <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />
   <br />
   <asp:Label ID="lblError" runat="server" Visible="false" />
 </asp:Panel>
 <br />
 <br />
 <asp:Panel ID="pnlCrop" runat="server" Visible="false">
   <asp:Image ID="imgCrop" runat="server" />
 </asp:Panel>
 <br />
 <br />
 <asp:Panel ID="pnlCropped" runat="server" Visible="false">
   <asp:Image ID="newImg" runat="server" />
 </asp:Panel>
 <br />
 </div>

и ниже код

protected void btnUpload_Click(object sender, EventArgs e)
{
    Boolean FileOK = false;
    Boolean FileSaved = false;

    if (Upload.HasFile)
    {
        Session["WorkingImage"] = Upload.FileName;
        String FileExtension = Path.GetExtension(Session["WorkingImage"].ToString()).ToLower();
        String[] allowedExtensions = { ".png", ".jpeg", ".jpg", ".gif" };
        for (int i = 0; i < allowedExtensions.Length; i++)
        {
            if (FileExtension == allowedExtensions[i])
            {
                FileOK = true;
            }
        }
    }

    if (FileOK)
    {
        try
        {
            Upload.PostedFile.SaveAs(path + Session["WorkingImage"]);
            FileSaved = true;
        }
        catch (Exception ex)
        {
            lblError.Text = "File could not be uploaded." + ex.Message.ToString();
            lblError.Visible = true;
            FileSaved = false;
        }
    }
    else
    {
        lblError.Text = "Cannot accept files of this type.";
        lblError.Visible = true;
    }

    if (FileSaved)
    {
        pnlUpload.Visible = true;
        pnlCrop.Visible = true;
        imgCrop.ImageUrl = "images/" + Session["WorkingImage"].ToString();

        //set the width and height of image
        imgCrop.Width = 350;
        imgCrop.Height = 280;

        //load the image to be written on
        Bitmap bitMapImage = new System.Drawing.Bitmap(Server.MapPath("images/" + Session["WorkingImage"].ToString()));
        Graphics graphicImage = Graphics.FromImage(bitMapImage);

        //smooth graphic is nice
        graphicImage.SmoothingMode = SmoothingMode.AntiAlias;

        //
        graphicImage.DrawArc(new Pen(Color.Red, 3), 90, 235, 150, 50, 0, 360);

        //write text
        graphicImage.DrawString("Card number", new Font("Lucida Console", 10, FontStyle.Bold), SystemBrushes.WindowText, new Point(100, 250));

        //set content type
        Response.ContentType = "image/jpeg";

        //save new image to response output stream
        bitMapImage.Save(Response.OutputStream, ImageFormat.Jpeg);

        //clean up
        graphicImage.Dispose();
        bitMapImage.Dispose();
    }

Answer 1

То, как вы обрабатываете ответ, неверно, вы хотите отправить отредактированное изображение на ту же страницу, но вы настраиваете тип содержимого ответа на image / jpeg (Response.ContentType = "image/jpeg";). Это невозможно потому что вы показываете изображение на HTML-странице с типом содержимого Text / HTML.

Приведенный выше код можно использовать только в том случае, если на странице имеется только изображение (без HTML) или если вы писали модуль HttpHandler в формате JPEG.

То, что вы точно можете сделать, это одно из следующих действий:

1. Сохраните отредактированное изображение на сервере и задайте для одного из атрибутов url тега <img> (возможно, newImg) новое изображение.

2. Преобразование отредактированного изображения в строку URL-адреса данных base64 (RFC 2397) строка и установка атрибута url для этой строки.