2012-02-01 73 views
0

它是我第一次处理图像的东西,我卡住了!将文字添加到图像并显示在同一页

我目前正在一个aspx页面,我需要满足以下要求...

  1. 用户能够使用文件上传控件上载的照片..
  2. 编辑照片通过添加文本等它...
  3. 显示在同一页面中的新形象..

现在,即时通讯能够从文件上传和展示获得的图像.. 我可以修改日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(); 
    } 

回答

1

你正在处理响应的方式是不正确的,你要发送的编辑的图像到相同的页面,但您正在做的是将响应的内容类型设置为image/jpeg(Response.ContentType = "image/jpeg";)这是不可能的,因为您在内容类型为文本/ HTML的HTML页面中显示图像。

上述代码只能用于页面只有图像(无HTML)或者如果您正在编写jpeg图像HttpHandler模​​块。

你到底能做什么是下列之一:

  1. 保存在服务器上的编辑图像,并设置<img>(也许newImg)标签的url属性的新形象之一。

  2. 将编辑后的图像转换为base64数据url字符串(RFC 2397)字符串,并将url属性设置为该字符串。