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

Question

Его первая работа над изображением, и я застрял!

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

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

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

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

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

Pls помощь !! :(:(

ниже страницы ...

<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

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

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

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

1. Сохраните отредактированное изображение на сервере и установить один из атрибута URL-<img> (возможно newImg) тега к новому образу.

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