CODEWITHSUNDEEP
c#asp.net.netimage
user1182637
user1182637

Reputation: 91

Adding text to image and displaying in the same page

Its my first time working on image stuff and i am stuck!!

I'm currently working on one aspx page where i need to meet the below requirements...

  1. User is able to upload photo using the file upload control..
  2. Edit the photo by adding in text etc to it...
  3. Display the new image in the same page..

For now, im able to get the image from the file uploader and display.. I can edit the image also... but i don't know how to display it in the same page...

it is somthing to do with saving image to responding output stream.. I just dunno how to work around here...

It will so called navigate to another page...

Pls help!! :( :(

below is the page...

<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>

And below is the code

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

Upvotes: 0

Views: 835

Answers (1)

Shekhar_Pro
Shekhar_Pro

Reputation: 18430

The way you are handling the response is not correct, you want to send the edited image to the same page but what you are doing is setting the content type of response to image/jpeg ( Response.ContentType = "image/jpeg";) That is not possible because you are showing the image in a HTML page whose content type is Text/HTML.

The above code you used can only be used if the page only haa a Image (no HTML) or if you were writing a jpeg image HttpHandler module.

What you exactly can do is one of the following:

  1. Save the edited image on the server and set one of the <img> (maybe newImg) tag's url attribute to the new image.

  2. Convert the edited image into a base64 data url string (RFC 2397) string and set the url attribute to that string.

Upvotes: 1

Related Questions