将文本添加到图像并在同一页面中显示答案

【问题标题】：Adding text to image and displaying in the same page将文本添加到图像并在同一页面中显示
【发布时间】：2012-02-24 03:09:12
【问题描述】：

这是我第一次处理图像问题，我被卡住了！！

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

用户可以使用文件上传控件上传照片..
通过添加文字等来编辑照片...
在同一页面中显示新图像..

目前，我能够从文件上传器获取图像并显示.. 我也可以编辑图像...但我不知道如何在同一页面中显示它...

这与将图像保存到响应输出流有关.. 我只是不知道如何在这里工作......

它将所谓的导航到另一个页面...

请帮忙！！ :( :(

下面是页面...

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

【问题讨论】：

标签： c# asp.net .net image

【解决方案1】：

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

您使用的上述代码只能在页面只有图像（无 HTML）或您正在编写 jpeg 图像 HttpHandler 模块时使用。

你能做的只是以下之一：

将编辑后的图像保存在服务器上，并将<img>（可能是newImg）标签的url属性之一设置为新图像。
将编辑好的图片转换为base64数据url字符串(RFC 2397)字符串，并将url属性设置为该字符串。

【讨论】：