locked
how to mark on image RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, I have a requirement that is not sure where to start. So much appreciated if you could shed some light. So I have information in the database like this:

    1m, 3m, 5m, 6m, 10m and I would like to take this information and mark it on straight vertical line. So the end result should look something like this:

    | - 1m

    | - 3m

    | - 5m

    | - 6m

    | - 10m

    I am just trying to make this as simple as possible. There won't be any gaps on the line between each distance but I just can't get it to display that way on here. Hope you got the idea. So it's just one straight line with a dash and next to the dash, the distance. How could I achieve this? Is there a javascript library to do this? It would be great if it could also take scaling into consideration. 

    Thanks

    Wednesday, October 24, 2018 3:37 AM

Answers

  • User-893317190 posted

    Hi asplearning,

    You could use System.Drawing api to help. Please pay attention to the white space between |-1m  and  |-3m ,|-3m and |-5m  and so on , it is necessary.

     protected void Page_Load(object sender, EventArgs e)
            {
    
                string text = "|-1m   |-3m   |-5m   |-6m   |-10m   |-15m";
                                                                                 //write your initial image path
                System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath("/images/WingtipToys/boatsail.png"));
                Bitmap bitmap = new Bitmap(image, image.Width, image.Height);
                System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);
                int fontSize = 8;
    
                //Declare a rectangular field
                RectangleF textArea = new RectangleF();
               
                textArea.Location = new Point(image.Width-fontSize*5, 0);
                textArea.Width = fontSize*5;
                textArea.Height = text.Length * fontSize;
    
                //Define font
                System.Drawing.Font font = new Font("Microsoft Yahei",fontSize,FontStyle.Regular);
                //font.Bold = true;
                //White brush, drawing text
                Brush whiteBrush = new SolidBrush(System.Drawing.Color.DodgerBlue);
             
                g.DrawString(text, font, whiteBrush, textArea);
                //save the image to the path 
                string path =Server.MapPath("/images/size.png") ;
                bitmap.Save(path, System.Drawing.Imaging.ImageFormat.Png);
                g.Dispose();
                bitmap.Dispose();
                image.Dispose();
    
            }

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 25, 2018 5:44 AM
  • User-893317190 posted

    Hi asplearning,

    I write the code 

    string path =Server.MapPath("/images/size.png")

    From the code, you  could know where the image is saved, then you could display the image with its original file name with the new path.

    About the size , you could  change the height style.

        <img src="../images/WingtipToys/boatbig.png" style="height:10px" />

    If you use image control,you could

     <asp:Image ID="Image1" runat="server" Height="20px" ImageUrl="~/images/WingtipToys/boatbig.png" />

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 30, 2018 5:05 AM

All replies

  • User-893317190 posted

    Hi asplearning,

    You could use System.Drawing api to help. Please pay attention to the white space between |-1m  and  |-3m ,|-3m and |-5m  and so on , it is necessary.

     protected void Page_Load(object sender, EventArgs e)
            {
    
                string text = "|-1m   |-3m   |-5m   |-6m   |-10m   |-15m";
                                                                                 //write your initial image path
                System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath("/images/WingtipToys/boatsail.png"));
                Bitmap bitmap = new Bitmap(image, image.Width, image.Height);
                System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);
                int fontSize = 8;
    
                //Declare a rectangular field
                RectangleF textArea = new RectangleF();
               
                textArea.Location = new Point(image.Width-fontSize*5, 0);
                textArea.Width = fontSize*5;
                textArea.Height = text.Length * fontSize;
    
                //Define font
                System.Drawing.Font font = new Font("Microsoft Yahei",fontSize,FontStyle.Regular);
                //font.Bold = true;
                //White brush, drawing text
                Brush whiteBrush = new SolidBrush(System.Drawing.Color.DodgerBlue);
             
                g.DrawString(text, font, whiteBrush, textArea);
                //save the image to the path 
                string path =Server.MapPath("/images/size.png") ;
                bitmap.Save(path, System.Drawing.Imaging.ImageFormat.Png);
                g.Dispose();
                bitmap.Dispose();
                image.Dispose();
    
            }

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 25, 2018 5:44 AM
  • User2108892867 posted

    Hello Ackerly Xu, thanks for your reply. I am doing some testing and I have a couple of questions. How do you display the processed image afterward? What is your html tag to display it? I do not want the whole page to display the image. Supposed I have this tag:

    <h1>Sample header</h1>
    <image height="550"/>
    <h1>Sample footer</h1>

    I want the image to be contained between both headers. Is it possible? 

    Thanks

    Monday, October 29, 2018 3:32 AM
  • User-893317190 posted

    Hi asplearning,

    I write the code 

    string path =Server.MapPath("/images/size.png")

    From the code, you  could know where the image is saved, then you could display the image with its original file name with the new path.

    About the size , you could  change the height style.

        <img src="../images/WingtipToys/boatbig.png" style="height:10px" />

    If you use image control,you could

     <asp:Image ID="Image1" runat="server" Height="20px" ImageUrl="~/images/WingtipToys/boatbig.png" />

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 30, 2018 5:05 AM