How to save picture and text into jpeg

Question

When I press the save button I can save only the text not the image in the JPEG format.

Html:

  <div id="painter" runat="server" style="left: 280px; position: absolute; top: 82px;
    width: 311px; height: 388px; background-color: #ccccff;">
    hi niladri
    <br />
    helo
    <br />
    dvshfgjfhglkglkhjlhkjmlkhklfhfg sasasasa
    <br />
    sssdsdsds


    <img src="image/1.jpg" alt="Osr" height="100" width="309" />
            </div>

<asp:Button ID="Save" runat="server" Style="left: 733px; position: absolute; top: 266px"
    Text="Button" OnClick="Save_Click" />

C# code:

  public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Save_Click(object sender, EventArgs e)
{
          string[] value = painter.Style.Value.Split(';');
    string hw = painter.InnerHtml;
    hw = hw.Replace("<br />", Environment.NewLine);

    string width = value[3];
    string height = value[4];
    string bgcolor = value[5];

    string[] widthArray = width.Split(':');
    string[] heightArray = height.Split(':');
    string[] bgcolorArray = bgcolor.Split(':');

    int w = int.Parse(widthArray[1].Replace("px", ""));
    int h = int.Parse(heightArray[1].Replace("px", ""));

    string color = bgcolorArray[1];

    //var overlay = new Bitmap(imagePath2);

    System.Drawing.Color c = System.Drawing.Color.Cyan;//.FromName("#ccccff");

    System.Drawing.Bitmap bt = new System.Drawing.Bitmap(w, h);
    System.Drawing.Graphics oGraphics = System.Drawing.Graphics.FromImage(bt);
    System.Drawing.Brush brush = new System.Drawing.SolidBrush(c);
    oGraphics.FillRectangle(brush, 0, 0, w, h);
    oGraphics.DrawString(hw, new Font("Arial", 12, FontStyle.Italic), SystemBrushes.WindowText, new PointF(50, 50));

    bt.Save("E:\\image10.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);  

 }
 }

Image:

Here in the attached Jpeg image, we get only the html image source information not the original image when we save into jpeg format.

Answer 1

Hi asked

Use These codes:

protected void Save_Click(object sender, EventArgs e)
{
        string[] value = painter.Style.Value.Split(';');
        string hw = painter.InnerHtml;
        hw = hw.Replace("<br />", Environment.NewLine);

        string width = value[3];
        string height = value[4];
        string bgcolor = value[5];

        string[] widthArray = width.Split(':');
        string[] heightArray = height.Split(':');
        string[] bgcolorArray = bgcolor.Split(':');

        int w = int.Parse(widthArray[1].Replace("px", ""));
        int h = int.Parse(heightArray[1].Replace("px", ""));
        //=====================================================================
        //Added By RAM:
        string key = "src=";
        int start_of_img_address = hw.IndexOf(key) + key.Length+1;
        int end_of_img_address = hw.Substring(start_of_img_address + 1).IndexOf('"');
        string image_addres = hw.Substring(start_of_img_address, end_of_img_address+1);
        image_addres = Server.MapPath(image_addres);
        Image my_img = Image.FromFile(image_addres);

        key = "<img";
        int start_of_img_tag = hw.IndexOf(key);
        int end_of_img_tag = hw.Substring(start_of_img_tag).IndexOf('>')+1;
        string img_tag = hw.Substring(start_of_img_tag, end_of_img_tag+1);
        hw=hw.Remove(start_of_img_tag, end_of_img_tag);
        Response.Write(img_tag);

        //=====================================================================
        string color = bgcolorArray[1];

        //var overlay = new Bitmap(imagePath2);

        System.Drawing.Color c = System.Drawing.Color.Cyan; //.FromName("#ccccff");

        System.Drawing.Bitmap bt = new System.Drawing.Bitmap(w, h);
        System.Drawing.Graphics oGraphics = System.Drawing.Graphics.FromImage(bt);
        System.Drawing.Brush brush = new System.Drawing.SolidBrush(c);
        oGraphics.FillRectangle(brush, 0, 0, w, h);
        oGraphics.DrawString(hw, new Font("Arial", 12, FontStyle.Italic), SystemBrushes.WindowText, new PointF(0, 0)); //changed 50 to 0

        //=====================================================================
        //Added By RAM:
        oGraphics.DrawImage(my_img, 0, 170, my_img.Width, my_img.Height);
        //=====================================================================

        bt.Save("E:\\image10.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
}

... and Result:

EDIT:

Also you can use Regular Expression instead of Substring, IndexOf and...

The Regular Expression (RegEx) help you for getting:

• Tags
• Styles
• And every things you want from your content

So, read RegEx tutorials

• Book
• The 30 Minute Regex Tutorial
• Example

You must arrange the content of the final image with your own calculations. Good luck...

Answer 2

You're only getting the InnerHTML of the div (which will only get text) so the IMG tag will be ignored. If you want to specify the image's path in the web source, you could use a server control (Image) and get the image path from that. Load the image in the code behind and draw that to your Bitmap object, then overlay the text and save.

int w = 640;
int h = 480;

System.Drawing.Color c = System.Drawing.Color.White;

string imagePath = Server.MapPath("~/image/1.jpg"); // here you would get the image source of your Image control
Image img = Image.FromFile(imagePath);

System.Drawing.Bitmap bt = new System.Drawing.Bitmap(w, h);
System.Drawing.Graphics oGraphics = System.Drawing.Graphics.FromImage(bt);
System.Drawing.Brush brush = new System.Drawing.SolidBrush(c);
oGraphics.FillRectangle(brush, 0, 0, w, h);
oGraphics.DrawImage(img, 0, 0, img.Width, img.Height);
oGraphics.DrawString("this is some text", new Font("Arial", 12, FontStyle.Italic), SystemBrushes.WindowText, new PointF(50, 50));

bt.Save("c:\\image10.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);

Answer 3

Use Graphics.DrawImage before the call to DrawString.

Graphics.DrawImage(Image.FromFile(Server.MapPath("~/image/1.jpg")), 0, 0, w, h);

Graphics.DrawImage: http://msdn.microsoft.com/en-us/library/dbsak4dc.aspx