Question

这是我第一次处理图像的东西，我被卡住了！

我目前正在开发一个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();
    }

Answer 1

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

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

您完全可以做的是以下之一：

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

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

1 个答案: