將文字添加到圖像並顯示在同一頁

它是我第一次處理圖像的東西，我卡住了！將文字添加到圖像並顯示在同一頁

我目前正在一個aspx頁面，我需要滿足以下要求...

用戶能夠使用文件上傳控件上載的照片..
編輯照片通過添加文本等它...
顯示在同一頁面中的新形象..

現在，即時通訊能夠從文件上傳和展示獲得的圖像.. 我可以修改日e圖像也...但我不知道如何顯示它在同一頁...

它是保存圖像到響應輸出流的事情。我只是不知道如何在這裏工作...

將所謂的導航到另一個網頁...

請幫助！ :(:(

下面

是網頁...

<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(); 
    }

來源

2012-02-01 user1182637

你正在處理響應的方式是不正確的，你要發送的編輯的圖像到相同的頁面，但您正在做的是將響應的內容類型設置爲image/jpeg（Response.ContentType = "image/jpeg";）這是不可能的，因爲您在內容類型爲文本/ HTML的HTML頁面中顯示圖像。

上述代碼只能用於頁面只有圖像（無HTML）或者如果您正在編寫jpeg圖像HttpHandler模塊。

你到底能做什麼是下列之一：

保存在服務器上的編輯圖像，並設置<img>（也許newImg）標籤的url屬性的新形象之一。
將編輯後的圖像轉換爲base64數據url字符串(RFC 2397)字符串，並將url屬性設置爲該字符串。

來源

2012-02-01 12:43:06

將文字添加到圖像並顯示在同一頁

回答

相關問題